tag is loaded onto the page. we are">
We are trying to figure out the correct way to handle CSS trees in Vue single file components when using Webpack.
In package.json, I have: "sideEffects": ["*.css", "*.less","*.vue" ]
, This seems to correctly prevent Vue components from loading when they shouldn't. However, every single tag will be loaded onto the page.
We load our SFC from an NPM package, which lists a series of exports, for example:
export blah from 'blah.vue'; export blah2 from 'blah2.vue'; export blah3 from 'blah3.vue';
Even if we just have import { blah3 } from 'a-npm-package';
in our JavaScript, it will include the styles for all three components. Since we have a lot of Vue components, this results in a lot of unused CSS being added to the page.
How do we prevent this from happening? There are definitely better, more dynamic ways of handling styles rather than just dumping them all into the page, even if only 1/10 of them are used.
Thank you
You can useMiniCssExtractPluginto perform CSS tree shaking. If you are using scss or sass, you can add these loaders as well.