css - Vue 和 Webpack 树抖动、副作用和 CSS : CSS of unused components being loaded

Question

我们正在尝试找出使用 Webpack 在 Vue 单文件组件中处理 CSS 树抖动的正确方法。
在 package.json 中，我有:"sideEffects": ["*.css", "*.less","*.vue" ] ，这似乎可以正常工作以阻止 Vue 组件在不应该加载的情况下加载。然而，每一个<style> SFC 中的标记已加载到页面上。
我们如何加载我们的 SFC 是从一个列出了一堆导出的 NPM 包，比如

export blah from 'blah.vue';
export blah2 from 'blah2.vue';
export blah3 from 'blah3.vue';

即使在我们的 JavaScript 中我只有 import { blah3 } from 'a-npm-package';它包括所有三种风格。由于我们有很多 Vue 组件，这导致许多未使用的 CSS 被添加到页面中。
我们怎样才能防止这种情况发生？必须有一种更好、更动态的方式来处理样式，而不是仅仅将它们全部转储到页面中，即使只有 1/10 的样式被使用？
谢谢

Answer 1

如果您使用 lazy loading components? 会怎样
带有 style 的组件标签只会在需要时加载。
您可以使用 lazy loading routes. 对路由执行相同的操作。