Webpack生产和开发之间关于摇树的区别是什么

Question

在我的webpack配置中

何时

mode: "development"

如果我使用

import { pick, flattenDeep, chunk, fromPairs } from 'lodash-es';

或

import _ from 'lodash-es';

束大小相同，约为3.27 mb。

但是当我在webpack配置中将模式设置为生产时，对于第一个导入语法，我得到的包大小为1.52mb，但是对于第二个语法，我得到的包大小为2.5mb，这使我相信在开发中，树摇没有发生。

我读到另一个堆栈溢出问题，即lodash-es是es6模块，并且webpack只能在那些树上摇晃，而不是普通的js，并且我还在开发中读到了我需要的webpack配置 >

plugins: [
    new webpack.optimize.ModuleConcatenationPlugin()
],

我一直都在玩。

所以我很好奇我所缺少的东西，以及为什么在使用上述插件时开发中的捆绑包尺寸没有减小。

我正在https://github.com/JordanKlaers/vueWebpackPlayground创建的示例项目中尝试这些更改。

Answer 1

默认情况下，Webpack的树状摇动机制在缩小阶段（由terser-webpack-plugin进行）中，默认情况下仅在生产模式下启用此阶段，当您使用development时，捆绑包的大小没有任何变化。

模块concat插件仅在es6 modules上有效，并且可以改善摇树过程。