webpack - 关于 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()
],

我一直都有。

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

score 1 · Accepted Answer

默认情况下，webpack 的 tree-shaking 机制适用于缩小阶段（通过terser-webpack-plugin），这个阶段默认情况下仅在生产模式下启用，因此，当你打开时，你看不到包大小的任何变化development。

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

1 回答 1