Laravel-mix: Very Long Compile Times vs. Elixir

[danremollino]

• Laravel Mix Version: 0.8.1
• Node Version (node -v): 7.5.0
• NPM Version (npm -v): 4.1.2
• OS: MacOS 10.12.3 (16D32)

I'm getting very long compile times, averaging about 33s with npm run dev. I have one, single file Vue component, and and a main .scss that take roughly 15s each during compilation. Removing sourcemaps and versioning does not seem to affect build time. Using the default mix.config.

I'd be happy to provide my .scss and .vue if needed, but I don't believe I have anything out of the ordinary going on. I don't recall how fast Elixir was compiling, but it was fast enough that I would not think anything of it. I had manually moved what I needed to a brand new Laravel 5.4 install, so I'd be pretty confident that I should not have any conflicts if that's possible.

Thanks, and please let me know if I can provide you with any other relevant information.

[eblin]

It could be the .copy() commands, have you tried without them? You could also profile webpack see if you get more info there.

webpack --profile --json > stats.json then use https://webpack.github.io/analyse/ to see what it tells you.

[danremollino]

Removed the .copy() to no effect.

I'm getting a command not found for webpack when I try to run the profile. I never explicitly installed Webpack, just whatever the Laravel 5.4 installer provided. What's the best way to enable this? Would installing Webpack globally cause a conflict with Mix?

[eblin]

You don't need to do that, webpack is installed in node_modules already by laravel-mix dependency ls node_modules/.bin | grep webpack
just put that line in the scripts section in package.json

    "profile": "cross-env NODE_ENV=development webpack --profile --json > stats.json"

[JeffreyWay]

It's important to remember that Webpack is doing a lot more work + optimizations than the Gulp equivalent was. You should typically use npm run watch, and your recompile times should be fairly short.

But, yeah, run the profiler and see what's taking so long.

[danremollino]

Thanks @JeffreyWay, understood.

I was able to generate the stats file, using this...

node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --profile --json > stats.json --config=node_modules/laravel-mix/setup/webpack.config.js

Sorting the output now. File is 3.2MB and not sure if the analyzer linked above by @eblin can handle it. Doesn't seem to be responding after giving it the file. I'll keep trying.

Running npm run watch and editing my .vue file it re-compiles in less than 1s. Editing the .scss file (~70k, 3k lines) takes about 16s. If this is normal, that's cool, just seemed way out there compared to what I have read you said you were getting. (Can't recall where, of course.)

[dobromir-hristov]

@danremollino remove the first line from the generated file, it is not valid JSON with it.

[danremollino]

Thanks @dobromir-hristov, should have realized this.

This is new to me, so I'm not sure what exactly what I'm looking for. I'm not getting any errors or warning, and the only 'hint' I'm getting is to 'Use prefetching to increase build performance.' I'll look into what I can do. I'm attaching the file in case anyone can provide any other feedback. Thanks.

webpack_profile.zip

[hamid-a]

Same issue
But when I changed mix version to 0.6 compile time became good
I think the problem is in 0.7 and 0.8 versions

[narazin]

It's solved the same problem for me:
1) use 0.8.7 version in package.json
2) Add Mix.options:

mix.options({
    processCssUrls: false
});

[danremollino]

@Rigorbb

Worked! I swear I tried this with a lower version of Mix with no effect. Brought my npm run dev compile time down to 3s.