Tree Shaking 是一种基于 ES6 模块静态分析的死代码消除机制，通过标记未引用的导出并剔除来优化打包体积。它依赖于 import/export 语法、生产模式配置及 sideEffects 声明，在 Webpack、Rollup 等工具中与代码压缩协同工作，有效减少 bundle 大小。
Tree Shaking 并不是一种压缩算法，而是一种 “死代码消除” 的优化机制，主要用于 JavaScript 模块打包过程中，剔除那些被定义但未被引用的代码。它广泛应用于现代前端构建工具如 Webpack、Rollup 和 Vite 中，配合 ES6 模块（import/export）静态结构实现高效的体积优化。
ES6 模块的静态结构是前提
Tree Shaking 能够工作的关键在于使用了 ES6 的静态模块语法。与 CommonJS 的动态 require 不同，ES6 的 import 和 export 在编译时就能确定依赖关系，这使得构建工具可以在打包前分析出哪些函数或变量从未被使用。
例如：
// utils.js
export const unusedFunc = () => {
console.log("这个函数没被调用");
};
export const usedFunc = () => {
return "Hello";
};
// main.js
import { usedFunc } from './utils.js';
usedFunc();
在这个例子中，unusedFunc 虽然被导出，但没有被任何模块导入使用。在生产构建时，支持 Tree Shaking 的打包工具会标记这部分为“不可达代码”，并在最终输出中将其移除。
立即学习“Java免费学习笔记（深入）”；
标记与剔除：Tree Shaking 的执行流程
Tree Shaking 实际上包含两个阶段：标记（marking）和剔除（tree pruning）。
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
- 从入口文件开始，递归分析所有通过
import引用的模块成员 - 将所有被实际使用的导出标记为“活跃”
- 未被标记的导出被视为“死代码”
- 在生成最终包时，这些死代码不会被包含进去
注意：这个过程依赖于打包工具的 “副作用”分析。如果一个模块有副作用（比如修改全局变量、注册事件等），即使没有显式导入，也可能被保留。
确保 Tree Shaking 生效的关键条件
要让 Tree Shaking 正常工作，需要满足几个必要条件：
- 使用 ES6 模块语法（
import/export），避免require - 构建工具配置为生产模式（如 Webpack 开启
mode: 'production'） - 在
package.json中声明"sideEffects": false或提供数组说明哪些文件有副作用 - 避免在模块顶层执行具有实际影响的语句（除非明确需要）
例如，在库开发中，正确设置 sideEffects 可以帮助使用者在引入部分功能时自动排除未用模块。
与代码压缩的协同作用
Tree Shaking 通常发生在打包阶段，而代码压缩（如 Terser）在之后进行。前者负责逻辑上的代码剔除，后者负责字符级压缩（如变量名缩短、空白去除）。两者结合能显著减小最终 bundle 体积。
即便如此，Tree Shaking 不会处理以下情况：
- 动态导入（
import()）中的模块无法静态分析 - CommonJS 模块（
module.exports）无法精确追踪导出使用情况 - 带有副作用的模块默认会被完整保留
基本上就这些。Tree Shaking 是现代前端工程化中提升性能的重要手段，核心在于“静态可分析”。只要结构清晰、模块规范，大部分未使用代码都能被自动清除，无需手动干预。不复杂但容易忽略。
