search

Akryum / vue-cli-plugin-ssr

:sparkles: Simple SSR plugin for Vue CLI
https://vue-cli-plugin-ssr.netlify.com/
MIT License
444 stars 69 forks source link

Duplicated CSS rules in production #46

Open mrksbnch opened 5 years ago

mrksbnch commented 5 years ago

When using this CLI plugin, there are duplicated CSS rules when using CSS modules and the "composes" feature. This seems to be caused by the critical CSS that's inlined into the <head> and is both happening in development and production (main issue).

I've created the following test repo (https://github.com/mrksbnch/vue-ssr-css-issue) that I created using vue create (Vue router as the only feature) and vue add @akryum/vue-cli-plugin-ssr. Afterwards, I added a test.css file in the folder assets and composed (<style module>) two style declarations from that file in Home.vue and HelloWorld.vue.

You can see the duplicated rules after running npm run ssr:serve or npm run ssr:build and npm run ssr:start in the dev tools:

screen shot 2019-01-06 at 18 32 42

Both CSS rules are inlined on the server side (<style data-vue-ssr-id>):

screen shot 2019-01-06 at 18 33 20

This is just a simple test repo with only one CSS rule. In a proper app this will cause a lot (!) of duplicated CSS rules and increase the file size by quite a bit. I've tested it with a simple app and I noticed some rules being duplicated 5 or 6 times.

zickat commented 5 years ago

I have the same issue, do you find a solution ?

p1n5u commented 5 years ago

Actually, the styles don't get added twice by the SSR plugin, but you get the styles delivered with the server side-rendered page and as soon as you mount the app on the client side on top of the pre-rendered dom, Vue adds the styles of the components again. So it is not really a Bug or an Issue, but it is simply a reality of prerendering. Right now I am working on a solution to this (for example extract the CSS from the JS bundle and inject them into the HTML). I keep you updated and tell you as soon as I've managed to solve this problem

p1n5u commented 5 years ago

The solution is really simple! The devs of vue-style-loader thought about this issue and already implemented a solution. To fix the duplicated style issue we simply need to configure the css loader to use the ssrId option:

ssrId (3.1.0+): Type: boolean. Add data-vue-ssr-id attribute to injected