关于 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，这让我相信在开发中没有发生 tree shaking。

我在另一个堆栈溢出问题上读到，lodash-es 是一个 es6 模块，而 webpack 只能在这些模块上摇树，而不是常见的 js，我还读到在开发 webpack 配置时我需要

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

我一直都有。

所以我很好奇我缺少什么以及为什么在使用提到的那个插件时在开发中没有减少包的大小。

我正在 https://github.com/JordanKlaers/vueWebpackPlayground

创建的示例项目中试验这些更改

Answer 1

默认情况下，webpack 的 tree-shaking 机制在 缩小阶段 （由 terser-webpack-plugin）工作，此阶段默认仅在 上启用]production 模式，因此，当您处于 development.

模式时，您看不到包大小有任何变化

Module concat 插件仅适用于 es6 modules，它可以改进 tree-shaking 过程。