Tree Shaking（摇树优化）详解
Tree Shaking（摇树优化）详解
Tree Shaking 是现代 JavaScript 打包工具（如 Webpack、Rollup、Vite等）中的一项重要优化技术，它的名字形象地比喻为"摇动一棵树，让没用的叶子掉下来"。
核心概念
- 作用：消除 JavaScript 中未使用的代码（dead code）
- 目标：减小最终打包文件的体积，提升应用加载速度
- 原理：基于 ES6 模块的静态分析（import/export）
为什么需要 Tree Shaking
假设你从 Lodash 这样的工具库中只使用 2-3 个函数：
- 传统方式：引入整个库（约70KB）
- 优化后：只包含实际用到的函数（可能只有几KB）
工作原理
- 依赖关系分析：打包工具会分析所有 import/export 语句
- 标记未使用代码：识别出哪些导出从未被导入使用
- 移除死代码：在最终打包时剔除这些未使用的代码
必要条件
Tree Shaking 要生效需要满足：
- 使用 ES Modules（import/export 语法）
- 代码是静态可分析的（不能是动态导入）
- 打包工具支持（Webpack 4+、Rollup、Vite等）
- 生产模式（通常只在生产环境生效）
实际示例
1. 模块代码 (math.js)
// 导出两个函数
export function square(x) {return x * x;
}export function cube(x) {return x * x * x;
}2. 使用代码 (app.js)
// 只导入 square 函数
import { square } from './math.js';console.log(square(5)); // 25打包后会只包含 square 函数，cube 函数会被移除。
如何确保 Tree Shaking 生效
-
使用 ES6 模块语法
// ✅ 正确 - 静态导入 import { cloneDeep } from 'lodash-es'// ❌ 避免 - 动态导入（无法静态分析） const _ = await import('lodash-es') -
选择支持 Tree Shaking 的库
- 优先选择
lodash-es而非lodash - 查看库的 package.json 是否有
"sideEffects": false标记
- 优先选择
-
配置打包工具
// webpack.config.js module.exports = {mode: 'production', // 生产模式自动启用优化optimization: {usedExports: true, // 标记未使用代码} } -
检查打包结果
- 使用 Webpack Bundle Analyzer 等工具分析
- 对比开发和生产环境的包大小差异
常见误区
- 认为所有库都自动支持：很多旧库使用 CommonJS 模块（require/exports），无法被 Tree Shaking
- 混淆运行时和编译时：动态导入（如
import()）无法被静态分析 - 忽略副作用代码：某些代码看似未使用，但可能有副作用（如 polyfill）
扩展知识
- Dead Code Elimination (DCE)：Tree Shaking 是 DCE 的一种实现方式
- Scope Hoisting：配合 Tree Shaking 使用的另一项优化技术
- PURE 注释：使用
/*#__PURE__*/标记无副作用的函数调用
Tree Shaking 是现代前端工程化的重要组成部分，能显著优化应用性能，特别是在使用大型工具库时效果更为明显。