Tree Shaking 是构建时移除未使用 ES6 模块代码的优化技术，依赖其静态导入导出特性；CommonJS 因动态性不支持，且副作用、动态 import、间接引用等会导致失效，需配合代码分割与压缩协同优化。
Tree Shaking 是一种在构建时移除 JavaScript 中未使用代码的优化技术，它依赖于 ES6 模块的静态结构特性，只保留实际被引用的导出（export）和导入（import）部分，从而减小最终打包体积。
为什么 Tree Shaking 只对 ES6 模块有效
ES6 模块（import/export）在编译阶段就能确定依赖关系，是静态的；而 CommonJS（require/module.exports）是运行时动态加载的，无法在构建时准确判断哪些导出没被使用。因此 Webpack、Rollup 等工具只能对 ES6 模块做安全的“摇树”——把没被 import 的 export 彻底删掉。
- 写成
import { foo } from './utils.js'，Tree Shaking 才可能剔除bar和baz - 如果写成
import * as utils from './utils.js'或require('./utils.js')，整个模块都会被保留 - 即使某个函数内部没被调用，只要它被 export 并被其他地方 import 过，就不会被删
常见导致 Tree Shaking 失效的情况
即使用了 ES6 模块语法，以下情况也会让未使用代码“幸存”下来：
-
副作用（side effects）：模块里有顶层执行语句（如直接调用函数、修改全局变量），工具默认不敢删，需在
package.json中显式声明"sideEffects": false或列出白名单 -
动态 import() 表达式：如
import(`./${name}.js`)，路径不确定，无法静态分析，整个模块会被保留 -
导出被间接引用：比如通过字符串属性访问
obj['someFunc']()，或赋值给变量再调用，工具无法追踪 -
第三方库未启用 Tree Shaking 支持：有些库导出方式不规范（如 UMD 包裹、default 导出含大量逻辑），需配置别名或使用 es 版本（如
lodash-es）
如何验证 Tree Shaking 是否生效
最直接的方式是查看构建产物源码或依赖图：
立即学习“Java免费学习笔记（深入）”；
- 用 Webpack 的
stats: 'verbose'或插件（如webpack-bundle-analyzer）分析模块引用链 - 检查打包后的文件中是否还存在明显未调用的函数或类定义
- 对比开启/关闭
mode: 'production'时的 bundle 大小变化（Tree Shaking 默认只在生产模式启用） - 在源码中临时注释掉某个 import，看打包体积是否明显下降
配合其他手段效果更佳
Tree Shaking 不是孤立的，常与以下技术协同工作：
