Laravel-mix: Slow compilation of SCSS

[KKSzymanowski]

I experienced a significant performance decrease with SCSS compilation when moving from Elixir to Mix.
I wanted to ask if anyone has the same issue?

I do not have one project where I can test the performance of both solutions but I have quite similar setup on two different.

The main difference is VueJS version but the JS compilation is quite fast for both.
On both projects I use Bootstrap 3 and here are some numbers:

Laravel Mix without watching:

• Whole process: 45 seconds
• Only SCSS compilation(js commented out): 37 seconds

Laravel Mix with watching:

• Initial full compilation(with JS): 36 seconds
• SCSS and JS recompilation: 16 seconds
• Initial SCSS only compilation: 32 seconds
• Only SCSS recompilation: 15 seconds

Just a notice: All of the 15-16 seconds of SCSS recompilation, the console output is stuck at:

10% building modules 0/1 modules 1 active ...crm_cc\resources\assets\sass\app.scss

Laravel Elixir without watching:

• Whole process: SASS 1.84s, Webpack 8.8s, all 11s
• Only SCSS compilation: 1.89s

Laravel Elixir with watching:

• Initial full compilation: 1.26s
• SCSS and JS recompilation: ~40ms(Elixir doesn't show Webpack compilation time)
• Initial SCSS only compilation: ~600ms
• Only SCSS recompilation: 30-40ms

The changes I did to make it recompile was to add or remove one empty line either in app.scss or app.js.

I tried one project with Bulma framework and the compilation was a little bit faster but it's still ages compared to what I experienced with Elixir.

If you want me to investigate this further, I can setup two identical projects and test it properly.

Versions:

• Node: 6.9.5
• NPM: 3.10.10
• Elixir: 6.0.0-15
• Mix: 0.8.8(recently updated from 0.5.* with no difference in performance)
• node-sass: 3.13.1 for Elixir, 4.5.0 for Mix
• OS: Windows 10

Running yarn run watch or npm run watch makes no difference, but if it helps I have [email protected]

[JeffreyWay]

Webpack is doing a lot more work than Laravel Elixir and Gulp, so you can't really compare the two.

You might try disable CSS url processing. This is a lengthy process that you may not need for your build. Just depends on how you've organized things. Give it a shot.

mix.sass('src', 'output')
    .options({ processCssUrls: false });

[KKSzymanowski]

I have created an empty project with just Bootstrap 4 SCSS compilation and it completes in several seconds and recompiles in 1.5 second.

I'll have to look into existing projects to pinpoint the issue and get back to you once I have it figured out.

[Xationch]

After a problem describe in this issue : https://github.com/JeffreyWay/laravel-mix/issues/538 and corrected by deleting the files public/mix-manifest.json, public/css/app.css and public/js/app.js I got exactly the same problem that you describe. Sass is very slow and stuck at 10%. Any idee why ?

EDIT: After investigation it's the url(/images/homepage.jpg) who is slow the compilation.

[KKSzymanowski]

Yup, I moved font-awesome styles and fonts out of the elixir mix compilation and it now takes 1.5s instead of 20+.

[tillkruss]

Holy glob, I disabled processCssUrls and build time went from 26460ms to 7268ms.

[milanchheda]

Here is my webpack.mix.js. It works perfectly fine on dev, but on production, takes a hell lot of time :(
On Production: DONE Compiled successfully in 286391ms

mix.js('resources/assets/js/app.js', 'public/js')
.extract(['vue', 'jquery']);
mix.sass('resources/assets/sass/app.scss', 'public/css')
.options({
  processCssUrls: false
});

mix.combine([
    'public/css/app.css',
    'resources/assets/css/nprogress.min.css',
    'resources/assets/css/style.css'
], 'public/css/custom.css')
    .minify('public/css/custom.css');

mix.combine([
    'public/js/manifest.js',
    'public/js/vendor.js',
    'resources/assets/js/nprogress.min.js',
    'public/js/app.js',
    'resources/assets/js/main.js',
], 'public/js/custom.js')
    .minify('public/js/custom.js');

I am sure, something is drastically wrong, but can't figure out what.

[ruchern-chong]

@milanchheda Need more details on your production server.

[milanchheda]

@ruchern - Do you need server configuration or output of npm run prod command? What should be an ideal configuration?

[KKSzymanowski]

@milanchheda, I think what @ruchern meant was: what is your operating system, what are the Node and NPM versions etc.

[milanchheda]

@KKSzymanowski - Here are the details:
OS: Ubuntu 16.04.2
Node: v6.10.3
NPM: 3.10.10

I am using Laravel Forge with AWS, having an EC2 instance with 1 GB RAM.

[ruchern-chong]

@milanchheda I think your RAM is quite low and might be resulting in slower build speeds.

Do you have a swap file of at least 2GB?

sudo swapon -s and tell me the size.

[milanchheda]

@ruchern - I upgraded my instance from t2.micro to t2.small and it worked.
It now takes: DONE Compiled successfully in 13207ms. Much much faster than previous state. Previously, it took 286391ms.

[newpain01]

I also have the same issue, it takes more than 20 seconds to compile the SCSS and around 17 seconds for a recompile when I am using watch. It's painful to work with this.

[ZQ-jhon]

I also have the same issue, it takes more than 20 seconds to compile the SCSS and around 17 seconds for a recompile when I am using watch. It's painful to work with this.

same issue at here.

[ivqonsanada]

Webpack is doing a lot more work than Laravel Elixir and Gulp, so you can't really compare the two.

You might try disable CSS url processing. This is a lengthy process that you may not need for your build. Just depends on how you've organized things. Give it a shot.

mix.sass('src', 'output')
    .options({ processCssUrls: false });

Wow, thanks, I had these problems lately, it took me 13000ms+ for every scss file save, and just after using this options, it becomes no more than 700ms, lol.