webpack 4 tree-shaking style sideEffects: Fix

What problem does this feature solve?

Essentially it’s an instruction to the vue-loader to import and use the style from the same file (recursively). The resulting value of style is {}, but it **tricks webpack into thinking the style in this file is not a side-effect.

What does the proposed API look like?

– file: Palette.vue —

<script>
import style from './Palette.vue?vue&type=style&index=0&module=true&lang=stylus&'

export default {
   style,
   ...
}
</script>
<style scoped lang="stylus">
...
</style>

It could be possible to append a similar import to the front of the script section automatically in the vue-loader, thereby making the style mandatory .

[Ruandou]

How would you apply sideEffects: true to css? like, there is no file with the extension *.css, right? only the .vue 🤔

https://github.com/vuejs/vue-loader/issues/1435#issuecomment-869074949

[thelonecabbage]

It is the same issue reported in: https://github.com/vuejs/vue-loader/issues/1435 https://github.com/vuejs/vue-loader/issues/1295 And documented at the bottom of this page: https://vue-loader.vuejs.org/guide/#manual-setup

General: The problem is if you are writing libraries, and exposing SFCs the CSS is not included in the resulting tree-shaken result. Despite what the docs above say CSS included in a .vue file SHOULD NOT be side effects.

It can be “fixed”

• by setting sideEffects: true,
• for *.css, *.vue

but this results i turning off tree shaking for the larger part of the library

Another solution is to import each .vue file individually, instead of exporting them as named exports. But this makes using the library more difficult and clunky.

The PR I posted isn’t ideal. But it does demonstrate one way to register the styles as mandatory only when their associated VUE files get used.

If there is a better way to attach the <style>s in a vue file to the export default script object then it would be great. (maybe in a way that is similar to the templates?)