在 Webpack 4 中禁用摇树 [英] Disable tree shaking in Webpack 4

问题描述

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

Is there a config option to disable unused module detection in Webpack 4?

我们最近从 lodash 切换到 lodash-es 以支持摇树.它运行良好，包也小得多，但现在我们的构建时间大约是原来的两倍(从 3 分钟增加到 6 分钟).

We recently switched from lodash to lodash-es to support tree shaking. It works great and the bundles are much smaller, but now our build takes about twice as long (up from 3 minutes to 6 minutes).

在 dev 上禁用它以加快构建速度会很棒，因为包大小在那里无关紧要.

Would be great to disable it on dev to speed up the build, since bundle size doesn't matter there.

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

I found this undocumented config option but I'm not sure how it would apply https://github.com/webpack/webpack/blob/master/lib/WebpackOptionsDefaulter.js#L207. Obviously UglifyJS is not running in dev so i'm assuming all of the slowdown comes from Webpack doing the work to mark which modules are unused.

我想你可以做一些类似的事情，比如只在 dev 上将 lodash-es 别名为 lodash，但这太黑了，无论如何 Lodash 不能与 lodash-es 一起使用code>import * as _ lodash-es 用于摇树所需的语法

I was thinking you could do something like aliasing lodash-es to lodash only on dev, but that's super hacky, and anyway Lodash doesn't work with the import * as _ syntax that lodash-es requires for tree shaking

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

I'm assuming this is the plugin that does the work of marking imports as unused, but since it's enabled by default I don't know how to disable it or remove it from the plugins array https://github.com/webpack/webpack/blob/next/lib/optimize/SideEffectsFlagPlugin.js#L1

你不能只在配置中设置 treeShaking: false 或其他东西，这似乎很奇怪.https://webpack.js.org/guides/tree-shaking/ 没有什么都不提.

It seems strange you can't just set treeShaking: false or something in the config. https://webpack.js.org/guides/tree-shaking/ doesn't mention anything.

我们已经根据构建环境将 mode 设置为 development 或 production，但即使在开发阶段，我们也看到这些较慢的构建时间.这表明 mode: development 不会禁用未使用的模块检测.

We are already setting mode to development or production based on the build environment, but we see these slower build times even on development. this would suggest that mode: development does not disable the unused module detection.

推荐答案

所以，我的另一个答案确实有帮助，但作用不大.虽然它避免了树抖动，但这只会导致构建将 lodash 的完整副本内联到每个包中.对于像我们这样拥有 100 个入口点的代码库，这仍然非常低效.它使构建速度快于 6 分钟，但远不及最初的 3 分钟.

So, my other answer does help, but not by much. While it avoids tree shaking, this just causes the build to inline the full copy of lodash into every bundle. For a codebase like ours with 100s of entry points, this is still very inefficient. It made the build faster than 6 minutes, but no where near the original 3 minutes.

我最后使用 externals 有条件地完全忽略 Lodash 导入，仅在开发中.这可以像

I the end I used externals to conditionally ignore Lodash imports entirely, only in dev. This can be done something like

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

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

You would then need to write some logic to conditionally include a script tag for the full Lodash build only on dev into your head tag.

所以这并不是对这个问题的通用答案——更具体的是我们的 Lodash 用例和一个非常大的代码库.对于其他代码库或依赖项，禁用摇树可能是正确的答案.

So this isn't really a generic answer to this question – more specific to our use case of Lodash and a very large codebase. For other codebases or dependencies, disabling tree shaking might be the right answer.

这篇关于在 Webpack 4 中禁用摇树的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！