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 提供了支持。