Webpack 中的 TreeShaking 是什么？

JS 文件绝大多数通过网络进行加载，然后执行。DCE（dead code elimination）可以使得加载文件的大小更小，整体执行时间更短。tree shaking 就是通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块语法的 静态结构 特性，例如 import 和 export。

原理

ESM

• import 只能作为模块顶层的语句出现
• import 的模块名只能是字符串常量
• import binding 是 immutable 的

这就是区别于CommonJs，ESM 独有的静态分析特性。等等，那什么是静态分析呢，就是不执行代码。CommonJs 中的 require，只有执行以后才知道引用的是什么模块。

保证了依赖关系是确定的，和运行时的状态无关，可以进行可靠的静态分析。静态分析会在绘制依赖图时做 DCE，减少打包体积。ESM 也支持动态引入，类似于下面这种引入方式是不支持 Tree Shacking的。

if (false) {
  import('./app.js').then(() => {
	
	});
} else {
 
}

最新版的 antd 以及 vue 都对 Tree Shaking 提供了支持。