如何确认抖动树是否与Webpack 2一起工作？

Question

我刚刚完成更新我的反应apppack从webpack 1到webpack 2.但是，我的包大小增加了〜30Kb。我希望捆包大小会减少，我如何确认树木摇晃的工作。为什么增加？

Answer 1

有几个步骤，你可以采取：

1. 关闭缩小/丑化
2. 插入注释一些你知道是未使用
3. 检查输出，看看这些评论的功能有或不是

Webpack还可以显示每个导入模块/包的大小。例如，在工作中，我们有一个包含lodash和下划线的包，因为我们使用的库中有一个需要它们中的每一个;的WebPack清楚地显示每个包多少千字节补充说：

您应该能够从该看哪里尺寸的增加是来自。

Answer 2

TL; DR：从2.3版开始，webpack没有任何树震动。它仅使用UglifyJS来删除未使用的代码。

---

首先我们必须定义什么是树抖动。

• Stackoverflow将其定义为“现代javascript的死码消除算法”。

• Webpack澄清说，它依赖于ES2015模块导入/导出模块系统的静态结构。

• 汇总（最初推广这个术语）也有类似的解释。

所以我们可以推导出一个特定的定义：静态排除未使用的ES模块输出。

现在，让我们看看哪些转型的阶段，每个模块通常有：

• 巴贝尔装载机被送入一个入口点，这是在一些模块格式的JavaScript文件。巴贝尔可以将其转换到另一个模块格式保留原样（module: false）
• 的WebPack将静态解析该文件并找到导入的模块（使用某种正则表达式的）
• 的WebPack要么变换模块格式（如果巴贝尔不会变形）或添加一些包装（对于commonjs模块）
• 导入的模块成为入口点并转到babel-loader
• 所有模块加载并转换后，uglify将处理结果bunle并删除未使用的代码（unused: true）

现在，我们可以看到，虽然uglify可以删除未使用的导出，但它实际上并不依赖ES模块语法。这只是一个通用的死代码消除，因此它不能被定义为“树抖动”。

那么我们该如何确认webpack是否有抖动树？

• 首先，所有的代码必须是ES模块格式。
• 正如在另一个答案中已经提到，我们必须禁用Uglify。
• 我们还必须禁用babel的模块转换，因为我们无法知道在该阶段是否使用了模块。

现在，如果的WebPack真正实现一棵树摇动的算法，我们可以通过查看这个切入点的集束大小确认：

import { keyBy } from 'lodash-es'; // lodash is in ES module format 

console.log(keyBy([{ key: 'value' }], 'key')); 

如果的WebPack确实有树摇晃的结果应该是几十千字节。如果不是，它会是半兆或更多。