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 提供了支持，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/248574.html
標籤：其他