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，但是这很hacky，而且Lodash不能使用{{ 1}}需要摇树

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

您似乎不能仅在配置中设置import * as _或其他内容，这似乎很奇怪。 https://webpack.js.org/guides/tree-shaking/什么也没提及。

我们已经基于构建环境将lodash-es设置为treeShaking: false或mode，但是即使在开发过程中，我们也会发现这些构建时间较慢。这表明development不会禁用未使用的模块检测。

Answer 1

好吧，我在文档中找不到任何东西，但这是一个相对廉价的解决方法：

添加

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

到您的module.rules数组。在开发模式下运行时，该规则将匹配每个文件，而在生产模式下运行时，该规则将不匹配任何文件。当它与文件匹配时，会（错误地）告诉Webpack该文件具有副作用，因此不能摇晃树。

这使开发人员的构建时间从6分钟缩短到3分钟。

非常理想，但是如果Webpack没有适当的配置选项，则必须这样做。

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

Answer 2

所以，我的其他回答确实有帮助，但效果不大。尽管它避免了摇树，但这只会导致构建将lodash的完整副本内联到每个包中。对于像我们这样的具有100多个入口点的代码库，这仍然非常低效。它使构建速度超过了6分钟，但没有达到原始3分钟的速度。

最后，我使用externals仅在dev中有条件地完全忽略了Lodash的导入。可以这样做

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

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

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

Answer 3

因此应该已经在dev env中禁用了这三种抖动，但是您也可以通过usedExports属性来控制它