Scope Hoisting（作用域提升） 和 Tree Shaking（搖樹優化） 是現代前端構建中至關重要的概念。它們是構建工具（如 Webpack、Rollup、Vite）用來優化最終打包產物的核心技術。

核心概念快速理解

• Tree Shaking：“消除死代碼”。像一個園丁搖動果樹，把已經枯萎、不再結果實的樹枝（未使用的代碼）搖掉。它是一個靜態分析過程，在打包時移除 JavaScript 上下文中未引用的代碼（export 但未被 import 的部分）。
• Scope Hoisting：“優化模塊結構”。它盡可能地將分散的模塊合并到一個函數作用域內，然后重命名變量以防止沖突。它的主要目的是減少打包后的函數聲明數量、減小文件體積、提升運行時執行效率。

---

1. Tree Shaking（搖樹優化）

是什么？

Tree Shaking 是一個術語，通常用于描述在 JavaScript 打包過程中移除未被使用的代碼（俗稱“死代碼”，dead code）的行為。它依賴于 ES2015 模塊語法（import 和 export）的靜態結構特性。

為什么需要？

在編寫項目時，我們經常會引入整個庫（例如 import _ from 'lodash'），但可能只使用了其中一兩個函數。如果沒有 Tree Shaking，整個 lodash 庫都會被完整地打包到最終產物中，導致體積巨大。

工作原理：

1. 標記：構建工具（如 Webpack）從入口文件開始，分析所有 import 和 export 語句，構建一個依賴圖。
2. 分析：工具會標記出哪些 export 的代碼被其他模塊 import 并使用了。
3. 清除：在最終生成打包文件時，所有未被標記為“已使用”的 export 代碼將被安全地剔除。

生效的前提條件：

1. 必須使用 ES Module（ESM）語法：即使用 import 和 export。CommonJS（require 和 module.exports）無法被可靠地 Tree Shaken，因為它的依賴關系是動態的，無法在構建時靜態分析。
   • 有效：import { debounce } from 'lodash-es';
   • 無效：const debounce = require('lodash/debounce'); (雖然這樣寫更好，但整個 require 語法樹本身不支持搖樹)
2. 編譯器不能將 ESM 轉換為其他模塊規范：例如，Babel 默認配置可能會將 import/export 轉譯成 CommonJS。你需要確保 Babel 保留 ESM 語法（通常通過設置 @babel/preset-env 的 modules: false）。
3. package.json 的 sideEffects 屬性：
   • 有些模塊本身沒有導出任何內容，而是會執行一些操作（如 polyfills、CSS 文件）。這些被稱為“有副作用”的模塊。
   • 如果你在 package.json 中設置 "sideEffects": false，是在告訴打包工具：“我這個包里的所有文件都是純的，沒有副作用，你可以安全地對它們進行 Tree Shaking”。
   • 如果你的包有副作用文件，需要列出它們："sideEffects": ["./src/some-side-effectful-file.js", "*.css"]，以防止它們被意外移除。

示例：

假設我們有一個 math.js 庫：

// math.js
export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b; // 假設這個函數未被使用
export const pi = 3.14159; // 假設這個常量未被使用

在我們的主文件中：

// main.js
import { add } from './math.js';
console.log(add(1, 2));

經過 Tree Shaking 后，打包產物將不包含 multiply 和 pi 的代碼，最終體積更小。

---

2. Scope Hoisting（作用域提升）

是什么？

在 Webpack 等工具中，每個模塊通常會被包裹在一個函數中（Webpack 稱之為“模塊包裝函數”）。這是為了實現模塊化，但會帶來一些性能開銷。Scope Hoisting 會盡可能地將所有模塊合并到一個作用域中，而不是將它們放在單獨的模塊函數里。

為什么需要？

1. 減少體積：消除大量模塊包裝函數的代碼本身就能減小文件體積。
2. 提升運行速度：
   • 減少函數聲明：JavaScript 引擎執行代碼時，調用一個函數的開銷比執行內聯代碼要大。
   • 改善壓縮效果：變量被合并到一個作用域后，壓縮工具（如 Terser）可以更好地重命名變量，實現更高效的壓縮。

工作原理：

構建工具會分析模塊之間的依賴關系，并將它們盡可能地“內聯”到同一個作用域中。它會智能地重命名變量以避免沖突。

示例（簡化概念）：

沒有 Scope Hoisting 的打包產物可能看起來像：

// 很多這樣的模塊包裝函數
(function(module, __webpack_exports__, __webpack_require__) {"use strict";__webpack_require__.r(__webpack_exports__);/* harmony import */ var _math__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);console.log(Object(_math__WEBPACK_IMPORTED_MODULE_0__["add"])(1, 2));
}),
(function(module, __webpack_exports__, __webpack_require__) {"use strict";__webpack_require__.r(__webpack_exports__);/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "add", function() { return add; });const add = (a, b) => a + b;const multiply = (a, b) => a * b;
})

啟用 Scope Hoisting 后，產物可能被優化為：

// 模塊被合并到一個作用域，變量被重命名
const $add$ = (a, b) => a + b;
// ... multiply 可能被 Tree Shaken 掉 ...
console.log($add$(1, 2));

可以看到，后者沒有了函數包裝，代碼更緊湊，執行效率更高。

---

兩者的關系與區別

特性	Tree Shaking	Scope Hoisting
主要目標	移除未使用的代碼，減小體積	優化模塊結構，減小體積并提升運行性能
工作階段	主要在代碼壓縮（Minification）階段	主要在模塊連接（Module Concatenation）階段
關系	它們是互補的優化技術。Scope Hoisting 將模塊合并到一個作用域，這為 Tree Shaking 提供了更好的基礎來識別未使用的變量和函數。

協同工作流程：

1. Scope Hoisting 首先將許多模塊內聯到同一個作用域中。
2. 然后，Tree Shaking 和代碼壓縮工具（如 Terser）在這個扁平化的作用域中進行靜態分析，能更輕松地發現和移除那些未被引用的變量和函數。

如何在 Webpack 中啟用？

• Tree Shaking：
  • 在 production 模式下（mode: 'production'）是默認啟用的。Webpack 會自動使用 TerserPlugin 進行壓縮和 Tree Shaking。
  • 確保你的代碼和依賴使用 ES Module 語法。
• Scope Hoisting：
  • 在 production 模式下也是默認啟用的。Webpack 內部使用 ModuleConcatenationPlugin 來實現這一功能。
  • 在某些情況下（如動態導入），Webpack 無法進行作用域提升，它會安全地回退到傳統的模塊包裝函數。

總結

優化	解決了什么問題？	帶來的好處
Tree Shaking	引入了整個庫但只使用一小部分	減小打包體積
Scope Hoisting	模塊包裝函數帶來的體積和性能開銷	減小打包體積并提升運行時性能

它們是現代前端構建流程的基石，通過協同工作，共同打造出體積更小、性能更優的應用程序 bundle。要最大化利用它們，關鍵在于編寫“可搖樹”的代碼（使用 ESM 語法）和正確配置庫的 sideEffects 屬性。