Akryum / Akryum/vue-cli-plugin-ssr

Duplicated CSS rules in production

Offen
#46 15 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
JavaScript
Sterne
441
Forks
69
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

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 `` 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 (``) 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:

<img width="1279" alt="screen shot 2019-01-06 at 18 32 42" src="https://user-images.githubusercontent.com/15638734/50739619-6fa76300-11e3-11e9-863c-268dabad673a.png">

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

<img width="554" alt="screen shot 2019-01-06 at 18 33 20" src="https://user-images.githubusercontent.com/15638734/50739658-b6955880-11e3-11e9-970f-d8cad662c4ff.png">

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.

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.