JavaScript 包體積是一個持續受到關注的問題，巨大的 JS 文件會導致更長的加載時間、更高的解析和執行成本，最終影響用戶體驗。幸運的是，我們有像 Tree Shaking 這樣的技術來幫助我們修剪掉那些“枯枝敗葉”，顯著減小最終的包體積。

什么是 Tree Shaking？

Tree Shaking，顧名思義，就像搖晃一棵樹，把枯死的葉子（未使用的代碼）搖下來。在 JavaScript 的世界里，它是一種 死代碼消除 (Dead Code Elimination, DCE) 的形式，專門用于移除 JavaScript 上下文中未被引用的代碼。

這個概念最初由 Rollup（一個 JavaScript 模塊打包器）推廣開來，現在已被 Webpack、Parcel 等主流打包工具廣泛支持。其核心思想是：只打包你實際用到的代碼。

Tree Shaking 如何工作？

Tree Shaking 的魔法主要依賴于 ES6 模塊（ESM）的靜態結構。ES6 模塊使用 import 和 export 語句來管理模塊間的依賴關系。這些語句的特點是：

• 靜態性：import 和 export 只能在模塊的頂層聲明，不能在條件語句、循環或函數內部動態使用。
• 明確性：導入和導出的名稱是明確的，不能是動態計算的字符串。

正是這種靜態性，使得打包工具（如 Webpack、Rollup）可以在 編譯時 就分析出哪些代碼被 import 了，哪些沒有。

Tree Shaking 的大致過程如下：

• 標記所有代碼：打包工具首先會標記出項目中的所有代碼，初始狀態下，所有代碼都被認為是“活代碼”（可能被使用）。
• 從入口開始分析：打包工具從應用程序的入口文件（entry point）開始，分析其 import 語句，找到所有被直接依賴的模塊。
• 遍歷依賴圖：接著，它會遞歸地遍歷這些被依賴模塊的 import 語句，構建一個完整的依賴圖。
• 標記“活代碼”：在遍歷過程中，所有被 import 語句實際引用的 export（函數、變量、類等）都被標記為“活代碼”。
• 移除“死代碼”：在依賴圖構建和標記完成后，那些從未被 import 引用過的 export，以及那些雖然被 export 但從未在任何地方被實際使用的代碼，就被認為是“死代碼”。在最終打包（通常是在生產模式下，結合代碼壓縮工具如 UglifyJS 或 Terser）時，這些死代碼會被移除。

一個簡單的例子：

在上述例子中，當打包工具處理 main.js 時，它會發現：

• foo 函數從 utils.js 中被導入并使用了。
• bar 函數雖然在 utils.js 中被導出了，但從未在 main.js 或其他任何地方被導入或使用。
• baz 函數也未被導入。

因此，在 Tree Shaking 之后，最終的打包文件將只包含 foo 函數的邏輯，而 bar 和 baz 函數的代碼將被移除，從而減小了包體積。

為什么 ES6 模塊是關鍵？

對比一下 CommonJS（Node.js 中常用的模塊系統）：

CommonJS 的 require() 是動態的，可以在任何地方調用，導入的模塊名也可以是變量。module.exports 也可以在運行時動態修改。這種動態性使得靜態分析變得非常困難，打包工具無法在編譯時準確判斷哪些代碼會被使用。

而 ES6 模塊的靜態特性，使得打包工具可以安全地進行分析和移除未使用代碼。

如何有效利用 Tree Shaking？

(1) 使用 ES6 模塊語法：

確保你的項目代碼（以及你依賴的庫）都使用 import 和 export。

在 Babel 等轉譯器配置中，避免將 ES6 模塊轉譯成 CommonJS 模塊（例如，Babel 的 @babel/preset-env 默認可能會這樣做，需要配置 modules: false 來保留 ES6 模塊語法供 Webpack 處理）。

(2) 指明副作用（Side Effects）：

有些模塊在被導入時可能會產生“副作用”，例如修改全局變量、在 window 上掛載對象，或者僅僅是導入一個 CSS 文件（它會直接影響頁面樣式，即使沒有顯式使用其導出）。

• 對于庫作者：在 package.json 中使用 sideEffects 字段來聲明。

 或者，如果庫中有特定文件有副作用（如全局 CSS）：

// package.json
{
  "name": "my-awesome-library",
  "version": "1.0.0",
  "sideEffects": [
    "./src/polyfill.js",
    "*.css"
  ]
}

• 對于應用開發者：Webpack 在 production 模式下會自動進行 Tree Shaking。你可以通過 optimization.usedExports（標記未使用導出）和 optimization.minimize（實際移除，通常由 TerserPlugin 完成）來控制。

(3) 避免引入整個庫，按需引入：

許多庫（如 Lodash）提供了按需引入的方式。

• 不好：import _ from 'lodash'; console.log(_.get({a:1}, 'a')); (可能引入整個 Lodash)
• 好：import get from 'lodash/get'; console.log(get({a:1}, 'a')); (只引入 get 函數)
• 或者使用支持 Tree Shaking 的 lodash-es：import { get } from 'lodash-es';

(4) 編寫純模塊：

盡量編寫無副作用的模塊。函數應該是純函數，模塊的導入不應該改變全局狀態。

(5) 使用生產模式打包：

Webpack 等打包工具通常只在生產模式 (mode: 'production') 下才會啟用完整的 Tree Shaking 和代碼壓縮優化。

(6) 檢查你的打包結果：

使用像 webpack-bundle-analyzer 這樣的工具來可視化你的包內容，確認 Tree Shaking 是否按預期工作，找出仍然可以優化的部分。

Tree Shaking 是一項強大的技術，它通過移除未使用的 JavaScript 代碼，幫助我們顯著減小應用的包體積更小的包意味著更快的加載速度、更優的性能和更好的用戶體驗。