JavaScript 中的 Tree-Shaking 机制解析
Tree-shaking 是现代前端构建工具中一种关键的优化技术，旨在移除代码包中未被实际使用的模块或函数，从而减小最终打包体积。它依赖于静态分析能力，仅在 ES6 模块（ESM）体系下有效。
为何需要 Tree-shaking？
当项目规模扩大时，引入大量工具函数或第三方库是常见做法。但若只使用其中一小部分功能，而整个模块仍被完整打包，就会造成冗余。例如：
// mathUtils.js
export function add(a, b) {
console.log("add");
return a + b;
}
export function subtract(a, b) {
console.log("subtract");
return a - b;
}
export function multiply(a, b) {
console.log("multiply");
return a * b;
}
export function divide(a, b) {
console.log("divide");
return a / b;
}
在主文件中仅导入并使用了 `add`：
// main.js
import { add } from './mathUtils';
add(1, 2);
如果未启用 tree-shaking，打包后所有四个函数都会保留在输出文件中。而启用后，未调用的函数（如 `subtract`, `multiply`, `divide`）将被自动剔除。
Tree-shaking 的前提：静态模块结构
Tree-shaking 能够工作的核心前提是模块必须是"静态"的。这正是 ES6 模块与 CommonJS 的根本区别：
- CommonJS（require）：动态加载，支持条件导入，例如：
这种写法无法在编译阶段确定依赖关系，因此无法进行 tree-shaking。let module; if (isDev) { module = require('./dev-utils'); } else { module = require('./prod-utils'); } - ES6 模块（import/export）：语法为静态声明，所有导入必须在顶层作用域定义，不能在条件语句中使用：
正确写法应为：// ❌ 错误示例 if (condition) { import { foo } from 'module'; }// ✅ 正确示例 import { foo } from 'module'; import { bar } from 'other-module'; if (condition) { // 只使用已导入的模块 foo(); } else { bar(); }
Tree-shaking 能消除什么？
它主要清除以下内容：
- 未调用的导出函数或变量
- 未访问的对象属性（如只导入对象但未使用其某个字段）
示例：
// data.js
export const userInfo = {
username: 'alice',
birthDate: '1990-01-01'
};
// app.js
import { userInfo } from './data.js';
console.log(userInfo.username); // 仅使用 username
打包结果中，`birthDate` 属性将被移除。
Tree-shaking 的局限性
并非所有未使用的代码都能被清除。例如：
- 带有副作用的代码（side effects）不会被移除，即使未被使用。
- 如全局变量修改、事件注册、Polyfill 注入等行为，即使没有显式导出，也可能影响运行时状态。
如何正确配置 Tree-shaking？
大多数现代打包工具（如 Webpack、Vite、Rollup）默认在生产模式下启用 tree-shaking。以 Webpack 为例，只需设置：
// webpack.config.js
module.exports = {
mode: 'production', // 启用优化
// 其他配置...
};
但对于有副作用的文件，需明确告知打包器不要移除它们。通过在 `package.json` 中声明：
{
"name": "my-lib",
"sideEffects": [
"./src/polyfills.js",
"*.css"
]
}
此配置告诉打包工具：`polyfills.js` 和所有 `.css` 文件包含必要副作用，不可摇动。
总结
Tree-shaking 是构建优化的重要手段，但它依赖于静态模块结构，并受副作用影响。合理使用 ESM 规范、避免动态导入、正确标注副作用，才能充分发挥其效能。
