禁用Webpack 4中的树抖动

Question

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

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

很高兴在dev上禁用它来加速构建,因为bundle大小并不重要.

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

我以为你可以做一些类似别名的东西lodash-es,lodash只有开发,但这是超级hacky,无论如何Lodash不能使用树摇动所需的import * as _语法lodash-es

我假设这是插件,它将导入标记为未使用,但由于它默认启用,我不知道如何禁用它或从插件数组中删除它https://github.com/webpack/的WebPack /斑点/下/ LIB /优化/ SideEffectsFlagPlugin.js#L1

看起来很奇怪你不能只treeShaking: false在配置中设置或者其他东西.https://webpack.js.org/guides/tree-shaking/没有提及任何内容.

我们已经设置mode到development或production基于编译环境,但是我们看到即使在这些发展较慢的构建时间.这表明mode: development不会禁用未使用的模块检测.

Answer 1

所以，我的另一个答案确实有帮助，但帮助不大。虽然它避免了树摇动，但这只会导致构建将 lodash 的完整副本内联到每个包中。对于像我们这样具有数百个入口点的代码库，这仍然非常低效。它使构建速度超过了 6 分钟，但与最初的 3 分钟相差甚远。

\n\n

最后，我曾经externals有条件地完全忽略 Lodash 导入，仅在开发中。这可以做类似的事情

\n\n

    externals: {\n        ...(isProduction ? {} : { 'lodash-es': '_' }),\n    },\n

\n\n

然后，您需要编写一些逻辑，以有条件地将仅在开发上构建完整 Lodash 的脚本标记包含到 head 标记中。

\n\n

因此，这并不是这个问题 \xe2\x80\x93 的通用答案，更具体地针对我们的 Lodash 用例和非常大的代码库。对于其他代码库或依赖项，禁用树抖动可能是正确的答案。

\n