Vue 和 Webpack 摇树、sideEffects 和 CSS：加载未使用组件的 CSS

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

带有该标签的组件style只有在需要时才会被加载。

您可以对具有延迟加载路线的路线执行相同的操作。