Tree Shaking通过静态分析ES6模块消除未使用代码，需使用import/export、构建工具支持及声明副作用，可显著减小打包体积，提升性能。
Tree Shaking 是一种在构建过程中消除 JavaScript 中未使用代码的优化技术，主要目标是减少最终打包文件的体积。它并不是某种工具本身，而是一种基于 ES6 模块（ESM）静态结构的优化原理，被广泛应用于现代前端构建工具如 Webpack、Rollup 和 Vite 中。
Tree Shaking 是如何工作的？
Tree Shaking 的核心前提是：模块导入和导出必须是静态的，也就是说，import 和 export 语句不能动态执行，这样构建工具才能在编译阶段分析出哪些代码真正被使用。
其工作流程大致如下：
- 构建工具从入口文件开始，通过静态分析构建整个模块依赖图
- 标记所有被实际引用的函数、变量或类
- 未被引用的导出内容被视为“死代码”
- 在生成最终输出时，这些未使用的代码会被移除
例如，你引入了一个工具库：
立即学习“Java免费学习笔记（深入）”；
import { debounce, throttle } from 'lodash-es';
debounce(myFunc, 300);
如果只用了 debounce，throttle 在整个项目中没有被调用，那么 Tree Shaking 可以将 throttle 相关代码剔除，从而减小包体积。
实现 Tree Shaking 的前提条件
要让 Tree Shaking 正常工作，需要满足几个关键条件：
- 使用 ES6 模块语法：必须使用 import/export，CommonJS（require/module.exports）是动态的，无法进行静态分析
- 构建工具支持：Webpack、Rollup 等需开启生产模式或配置 mode: 'production'，以启用压缩和摇树优化
- 代码无副作用：构建工具需要知道某些模块是否具有“副作用”，比如修改全局变量、注册钩子等。可通过 package.json 中的 "sideEffects" 字段明确声明
比如在 package.json 中：
{
"sideEffects": false
}
表示整个项目无副作用，可安全删除未引用的模块。如果有 CSS 文件或全局脚本，则需列出：
{
"sideEffects": ["./src/polyfill.js", "*.css"]
}
为什么 Tree Shaking 对性能很重要？
现代前端项目依赖大量第三方库，很多情况下只用到其中一小部分功能。如果没有 Tree Shaking，整个模块都会被打包进去，造成资源浪费。
举个例子：lodash 提供上百个工具函数，若不支持 Tree Shaking，即使只用一个函数也可能引入几十 KB 甚至更多代码。而启用后，仅打包所需部分，显著降低加载时间与内存占用。
这对移动端、弱网环境下的用户体验尤为重要。
常见误区与注意事项
很多人以为只要用了 ES6 模块就能自动 Tree Shaking，其实不然。以下是一些容易忽略的点：
- 使用 babel 转译时，如果配置不当（如把 ES6 模块转成 CommonJS），会破坏静态结构，导致 Tree Shaking 失效。应设置 { "modules": false }
- 动态导入（dynamic import()）不会参与初始 Tree Shaking，但可用于代码分割
- 具名导出比默认导出更容易被正确识别和剥离
- 某些库发布版本已预打包为 bundle，内部不可摇，需选择提供 ESM 版本的库（如 lodash-es）
基本上就这些。Tree Shaking 不复杂，但它依赖正确的模块规范和构建配置。只要保证使用静态导入、合理声明副作用，并选择合适的库格式，就能有效压缩 JavaScript 体积，提升应用性能。
