webpack - 在 Webpack 4 中禁用树抖动

Question

是否有一个配置选项可以禁用 Webpack 4 中未使用的模块检测？

我们最近从 lodash 切换到至lodash-es支持摇树。它工作得很好，并且捆绑包要小得多，但现在我们的构建需要大约两倍的时间(从 3 分钟增加到 6 分钟)。

在开发人员上禁用它以加快构建速度会很棒，因为捆绑包的大小在那里并不重要。

我找到了这个未记录的配置选项，但我不确定它将如何应用 https://github.com/webpack/webpack/blob/master/lib/WebpackOptionsDefaulter.js#L207 .显然 UglifyJS 没有在 dev 中运行，所以我假设所有的减速都来自 Webpack 所做的工作以标记哪些模块未使用。

我在想你可以做一些像别名 lodash-es至lodash仅在 dev 上，但那是 super hacky，无论如何 Lodash 不能与 import * as _ 一起使用lodash-es 的语法需要摇树

我假设这是将导入标记为未使用的插件，但由于它默认启用，我不知道如何禁用它或将其从插件数组 https://github.com/webpack/webpack/blob/next/lib/optimize/SideEffectsFlagPlugin.js#L1 中删除

你不能只设置 treeShaking: false 看起来很奇怪或配置中的某些内容。 https://webpack.js.org/guides/tree-shaking/没有提及任何事情。

我们已经在设置 ​​mode至development或 production基于构建环境，但我们甚至在开发中也看到了这些较慢的构建时间。这表明 mode: development不会禁用未使用的模块检测。

Answer 1

好吧，我在文档中找不到任何内容，但这是一个相对无害的解决方法:

添加

{
    test: () => !env.production,
    sideEffects: true,
},

致您的 module.rules大批。在 dev 模式下运行时，该规则将匹配每个文件，而在 prod 模式下运行时不匹配任何文件。当它匹配一个文件时，它会(错误地)告诉 Webpack 该文件有副作用，因此不能进行 tree-shaking。

这使我们在开发上的构建时间从 6 分钟缩短到 3 分钟。

几乎不理想，但如果 Webpack 没有适当的配置选项，这将不得不这样做。

它似乎也比其他替代方案更好，例如仅在开发中启用 Babel CJS 模块转换，因为这可能会导致由于可变 CJS 模块和不可变 ES 模块之间的语义/行为差异而仅出现在生产中的细微错误。