TreeShaking是什么？

Tree Shaking 值的就是当我引入一个模块的时候，我不引入这个模块的所有代码，我只引入我需要的代码，这就需要借助 webpack 里面自带的 Tree Shaking 这个功能来帮我们实现。

原理ESM

• import 只能作为模块顶层的语句出现

• import 的模块名只能是字符串常量

• import binding 是 immutable 的

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

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

<pre data-language="javascript" id="QE6w3" class="ne-codeblock" style="border: 1px solid #e8e8e8; border-radius: 2px; background: #f9f9f9; padding: 16px; font-size: 13px; color: #595959">if (false) {
  import('./app.js').then(() => {

    });
} else {

}</pre>

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