Laravel-mix: Sass compilation speed decreases dramatically when using url()

[ghost]

I have discovered that compiling sass takes considerably more time when my stylesheet includes url() references. Take for example the following CSS:

/* Web Fonts */
@font-face { font-family: "FontAwesome"; font-style: normal; font-weight: 400; src: local("Font Awesome"), local(FontAwesome-Regular), url("/fnt/FontAwesome-Regular.woff2") format("woff2") }
@font-face { font-family: "Proxima Nova"; font-style: normal; font-weight: 400; src: local("Proxima Nova"), local(ProximaNova-Regular), url("/fnt/ProximaNova-Regular.woff2") format("woff2") }
@font-face { font-family: "Proxima Nova"; font-style: normal; font-weight: 700; src: local("Proxima Nova Bold"), local(ProximaNova-Bold), url("/fnt/ProximaNova-Bold.woff2") format("woff2") }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; src: local("Roboto"), local(Roboto-Regular), url("/fnt/Roboto-Regular.woff2") format("woff2") }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; src: local("Roboto Bold"), local(Roboto-Bold), url("/fnt/Roboto-Bold.woff2") format("woff2") }
@font-face { font-family: "Oleo Script"; font-style: normal; font-weight: 400; src: local("Oleo Script"), local(OleoScript-Regular), url("/fnt/OleoScript-Regular.woff2") format("woff2") }

Without these lines, my compilation time is 372ms, but with these lines included, it jumps to 3207ms.

It seems with each additional use of url() (for example, background-image), the compilation time increases and quickly becomes unusable. Particularly for nom run watch (over 3 seconds).

[JeffreyWay]

Yeah this is from the resolve-url-loader. It slows everything down drastically. It seems to be necessary to get Bootstrap to compile properly.

Let me research this a bit and find a fix.

[adiachenko]

Create another entry to speed up re-compile.

I don't entirely inderstand how laravel-mix processes styles, but what most of webpack boilerplates for single-page javascript applications do is handle examples like the above to file-loader (unless the piece of content under question is really small in which case it will be directly converted to url).

And my point is, they still slow as heck, no way around that. You just need to organize your entry points in such a way that only an initial compilation suffers the blow to performance.

[ghost]

Do you mean not chaining? E.g.

mix.sass().version();
mix.js().version();

Instead of mix.js().version().sass() etc

EDIT: Oh, no wait, I see what you mean, pass the url requests into a separate file that doesn't get compiled every time the CSS changes. Yeah, that's an option, however, as Jeffrey said, it requires further investigation for a more long term fix.

[adiachenko]

@thepenguin1 Yeah, instead of having one app.scss or whatever it's called nowadays, you create another entry sass file to store some rarely changed stuff like bootstrap and your fonts. That's what people usually do with webpack, because even if you take url() out of the equation, extract-text-plugin will be still much slower than raw style-loader.

[ghost]

Got it. Thanks for the tip!

[JeffreyWay]

I pushed a commit today that will speed things up a good bit. f5cb20274c24258dfb5c18741e627cc6235f03a6

[SYNTAG]

@JeffreyWay It is still slow. Do I need to install fast-sass-loader manually or something? If your Sass contains 15 different image URLs, it can take over 17 seconds!

Edit: Just saw, you reverted the fast-sass-loader back to the slow-loader 466af83... Any word on why we can't use fast-sass-loader?

Edit2: After more digging around, I found that the way to fix this is to add .options({processCssUrls: false}) to webpack.mix.js, hope this helps someone.

[cspor]

@SYNTAG oh my god, you saved me. Thank you so much for your second edit.

My compile times went up to over 20 seconds and after digging around and removing parts of scss I noticed that it was the urls that were causing the slow compile times but didn't know why or what was wrong with them.

Now i'm at 0.2 seconds again. Woohoo!

[SYNTAG]

@cspor Glad I was able to help! :)