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 属性。