webpack scope hositing 和tree shaking
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 库都会被完整地打包到最终产物中，导致体积巨大。
工作原理：
- 标记：构建工具（如 Webpack）从入口文件开始，分析所有
import和export语句，构建一个依赖图。 - 分析：工具会标记出哪些
export的代码被其他模块import并使用了。 - 清除：在最终生成打包文件时，所有未被标记为“已使用”的
export代码将被安全地剔除。
生效的前提条件：
- 必须使用 ES Module（ESM）语法：即使用
import和export。CommonJS（require和module.exports）无法被可靠地 Tree Shaken，因为它的依赖关系是动态的，无法在构建时静态分析。- 有效：
import { debounce } from 'lodash-es'; - 无效：
const debounce = require('lodash/debounce');(虽然这样写更好，但整个require语法树本身不支持摇树)
- 有效：
- 编译器不能将 ESM 转换为其他模块规范：例如，Babel 默认配置可能会将
import/export转译成 CommonJS。你需要确保 Babel 保留 ESM 语法（通常通过设置@babel/preset-env的modules: false）。 - 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 会尽可能地将所有模块合并到一个作用域中，而不是将它们放在单独的模块函数里。
为什么需要？
- 减少体积：消除大量模块包装函数的代码本身就能减小文件体积。
- 提升运行速度：
- 减少函数声明：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 提供了更好的基础来识别未使用的变量和函数。 |
协同工作流程：
- Scope Hoisting 首先将许多模块内联到同一个作用域中。
- 然后，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 属性。