JavaScript Tree Shaking原理
Tree Shaking 是构建工具利用 ES6 模块静态结构实现的代码优化技术，通过标记、剔除、压缩三步移除未使用代码。其生效依赖于静态import/export、无副作用声明、命名导出及正确配置如 babel 的 modules: false 和生产模式打包，确保仅保留运行时真正需要的代码，从而减小包体积。
import/export、无副作用声明、命名导出及正确配置如 babel 的 modules: false 和生产模式打包，确保仅保留运行时真正需要的代码，从而减小包体积。Tree Shaking 并不是 JavaScript 本身的特性，而是构建工具（如 Webpack、Rollup）在打包过程中利用 ES6 模块系统的静态结构，来实现“摇掉”未使用代码的一种优化手段。它的目标是减少最终打包文件的体积，只保留实际用到的代码。
ES6 模块的静态结构是前提
Tree Shaking 能够工作的核心前提是：ES6 模块（import / export）是静态的，也就是说，模块的导入导出关系在代码运行前就可以被分析清楚。
与之对比，CommonJS（require / module.exports）是动态的，比如：
if (condition) { require('some-module'); }这种写法在运行时才决定是否加载模块，构建工具无法在打包阶段准确判断哪些代码会被用到，因此不能有效做 Tree Shaking。
基本工作流程
Tree Shaking 的过程大致分为三步：
- 标记（Mark）：从入口文件开始，顺着 import 关系递归查找所有被引用的模块和函数。
- 剔除（Sweep）：将没有被引用到的导出（export）标记为“可删除”。
- 压缩（Minify）：通过压缩工具（如 Terser）真正移除这些未使用的代码。
如何确保 Tree Shaking 生效
即使使用了 ES6 模块语法，某些写法仍可能导致 Tree Shaking 失效。以下是一些关键注意事项：
- 避免副作用（side effects）：如果模块有副作用（比如执行了全局操作），构建工具默认不敢删除它。可通过 package.json 中的 "sideEffects": false 明确告知工具哪些文件无副作用。
- 使用命名导出（named export）：Tree Shaking 对命名导出更友好。例如：
如果只用到了 funcA，funcB 就可以被安全移除。
- 避免解构赋值后整体引用：比如这样写会阻止 Tree Shaking：
应改为：
import { funcA } from './utils';构建工具的支持
Webpack 和 Rollup 都支持 Tree Shaking，但需注意配置：
- 使用 mode: 'production'，因为生产模式下自动开启压缩和 Tree Shaking。
- 确保 babel 编译时不要把 ES6 模块转成 CommonJS。在 babel 配置中设置：
这样才能保留 import/export 的静态结构。
基本上就这些。Tree Shaking 不是魔法，它依赖静态分析 + 正确的模块语法 + 构建配置协同工作。只要代码写得“干净”，大多数现代项目都能从中受益。不复杂但容易忽略细节。
