Vue-loader 15 and style injection in non-spa application

vue-loader

#1

I’m running a Laravel application witih laravel-mix (v2.1.x of now), but want to upgrade to the latest version of laravel-mix (v4.0.x) with the benefits of faster builds, newer webpack etc.

However, after trying, I have noticed that the <style> blocks from all components in the entire application is injected on every page.

The application isn’t single page as of yet, so it was quite a surprise to see the number of <style> tags in <head> rise from like 4-5 to 86. We also have a NPM repo with custom design components that are also included here.

In vue-loader 14 it seems to only inject the styles needed for that page in particular, and nothing more. In the v14 to v15 migration docs, there is a mention of this, but I am really missing an option to disable this somehow.

Is there a workaround, hidden option or any way to get around this without having to go through every single component and re-write a bunch of CSS?


#2

Not really, no.

The current (v15) behaviour was the old behaviour before v13 or so.

Then with v13 we instroduced lazy loading of styles, where styles are only injected once the component is actually mounted(!).

But people found many problems with it because it leads to a different order of styles between development (where styles are injected dynamically and lazily) and production, where people typically extract all CSS into one file and include that in their index.html.

So we reverted this behaviour, because there’s nothing worse than bugs that only appear in production, and not in development.

Why would you include all components from the entire app in every page though? Because that’s the only way that the CSS of all components could be injected.

If you only include the components that are used on that page, only their styles should be injected.

If you really import all components on every page, you should worry about JS size.


#3

You are quite right, laravel-mix uses v13 in the 2.x branch, my bad.

Good question. Unfortunately I am not quite sure what the idea was when it was made, a few years back now. I assume it was for the ease of just including the app.js once in the master blade, and it “just works” everywhere. The JS size is an issue, but mostly with the third party js (vendor.js) file.

Anyway, I suppose the best fix would be to split up the app.js into separate .js files for each page/section of the web site instead, as there are no workarounds or hacks to make v15 work more like v13?