Tree Shaking 是一种通过移除未使用代码来减小打包体积的优化技术，依赖 ES6 模块的静态结构，在 Webpack、Vite 等工具中实现；需使用 import/export 语法、避免副作用并配置 sideEffects 字段，结合生产模式与构建分析验证效果。
Tree Shaking 并不是某种具体的工具，而是一种优化技术的概念，它的核心目标是“移除 JavaScript 中未使用的代码”，从而减小打包体积。这个术语最早由 Rollup 团队提出，如今在 Webpack、Vite 等现代构建工具中广泛支持。理解其原理并正确实践，对前端性能优化至关重要。
Tree Shaking 是如何工作的？
Tree Shaking 的实现依赖于 ES6 模块系统（import / export）的静态结构。与 CommonJS 的动态引入不同，ES6 模块在编译时就能确定导入导出关系，这让构建工具可以在打包前分析哪些函数或变量从未被使用。
基本流程如下：
- 构建工具扫描所有模块，建立模块间的依赖图
- 从入口文件开始，标记所有被实际引用的导出
- 未被标记的导出被视为“死代码”
- 压缩工具（如 Terser）在生产环境下将其删除
确保你的代码支持 Tree Shaking
即使构建工具支持 Tree Shaking，如果代码写法不当，也无法生效。以下是关键实践建议：
- 使用 ES6 模块语法（import/export），避免 require
- 避免给模块添加副作用（side effect），比如在模块顶层执行修改全局变量的操作
- 在 package.json 中明确声明 "sideEffects: false"，帮助构建工具判断哪些文件可安全剔除
例如，一个仅提供工具函数的工具库：
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
若项目中只用了 add，那么 subtract 在打包时将被摇掉。
配置构建工具以启用 Tree Shaking
以 Webpack 为例，需满足以下条件：
- 使用 mode: 'production'，开启自动压缩和 Tree Shaking
- 确保 babel 转译时保留 ES6 模块语法（设置 { modules: false }）
- 在 package.json 中合理配置 sideEffects 字段
示例配置片段：
module.exports = {
mode: 'production',
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: [['@babel/preset-env', { modules: false }]]
}
}
}
]
}
};
同时，在 package.json 中：
"sideEffects": false
如果你的包包含 CSS 引入或有特定副作用文件，可以写成：
"sideEffects": ["./src/polyfill.js", "*.css"]
验证 Tree Shaking 是否生效
可以通过生成 bundle 分析报告来确认。使用 webpack-bundle-analyzer 或 Vite 的 build --report 选项，查看最终打包结果中是否包含未使用的模块。
另一个简单方法是：在代码中定义一个未被调用的函数，然后检查打包后的文件是否还存在该函数。如果不存在，说明 Tree Shaking 成功。
基本上就这些。Tree Shaking 虽然自动程度高，但依赖正确的模块语法和配置。只要保持代码模块化、使用 ES6 语法、合理声明 sideEffects，就能有效减少生产包体积，提升加载性能。
