Tree Shaking 是 Webpack 在 production 模式下通过静态分析 ES6 import/export 关系剔除未使用导出的优化机制，仅对 ESM 有效，需满足具名引入、sideEffects 正确声明等条件。
Webpack 的 Tree Shaking 是一种在构建阶段自动剔除未使用代码的优化机制，核心目标是减小最终打包体积。它不是运行时行为，也不依赖执行逻辑，而是靠静态分析 ES6 模块的 import/export 关系来判断哪些导出从未被引用，从而安全移除。
Tree Shaking 为什么只对 ES6 模块有效
ES6 模块的导入导出是静态声明（编译期即可确定），比如 import { foo } from './utils.js'，Webpack 能明确知道只用了 foo，而 bar 没被引用。但 CommonJS 的 require() 是动态的，可能受条件、变量影响，无法静态判定依赖路径和导出使用情况，所以不支持 Tree Shaking。
- 避免混用
require和import，尤其在同一个模块中 - Babel 配置中必须设
modules: false，否则会把import编译成require，导致 Tree Shaking 失效 - 第三方库若用 CommonJS 发布（如早期 lodash），需借助
lodash-es等 ESM 版本才能摇掉未用方法
Webpack 中 Tree Shaking 的实际触发条件
它不是“开了就一定生效”的开关，需要同时满足几个前提：
- mode 必须为 'production'：Webpack 5+ 默认开启，开发模式下即使配置了也不会执行剔除
-
模块必须有明确的 export，并且 import 方式是具名或默认的静态引入：例如
import { debounce } from 'lodash'可摇，import _ from 'lodash'则整个包都会被打入 -
package.json 中正确声明
"sideEffects"：值为false表示所有文件都无副作用（可安全摇），值为数组（如["*.css", "src/init.js"]）则列出不能被摇的文件；不写或设为true会禁用该模块的 Tree Shaking
如何验证 Tree Shaking 是否起作用
最直接的方式是看打包后代码里是否还存在未使用的导出声明，以及是否被标记为 /* unused harmony export xxx */：
立即学习“Java免费学习笔记（深入）”；
- 构建时加
--stats=verbose，再用webpack-bundle-analyzer查看模块构成，未引用的模块或导出通常不会出现在依赖图中 - 检查 dist 目录下 bundle 文件源码，搜索
unused harmony export，若有说明 Webpack 已完成标记，后续由 Terser 删除 - 对比启用前后 bundle 大小变化，尤其是引入大型工具库（如 moment、date-fns）时效果明显
常见导致 Tree Shaking 失效的情况
即使配置正确，以下写法也会让 Webpack “不敢”摇掉代码：
- 导出被间接引用：比如
export const x = 1，然后在另一个文件里const obj = { x }，再export default obj—— Webpack 可能因不确定x是否被外部访问而保留 - 模块内有副作用（如修改全局变量、调用
console、操作 DOM）但未在sideEffects中声明，Webpack 会保守保留整块代码 - 使用了动态
import()：这种异步导入无法静态分析具体用到哪个导出，相关模块整个保留 - 循环引用中涉及导出使用，可能干扰标记逻辑，建议重构拆分
