关于 tree shaking 的 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 的 tree-shaking 机制工作在 minification 阶段（terser-webpack-plugin），这个阶段默认只在 production 模式下启用，因此，你在development 上看不到包大小的任何变化。

Module concat 插件仅适用于es6 modules，它可以改善摇树过程。