Tree Shaking并非自动生效，需同时满足ESM语法、正确配置sideEffects字段、生产模式构建三者协同；混用CommonJS、遗漏sideEffects或错误导出方式均会导致失效。
Tree Shaking 不是“开了就自动生效”的功能，它依赖一整套协同运作的规则体系。配合得好，未使用的函数、工具类、甚至整个模块都能被精准剔除；配合出错，比如混用 CommonJS 或漏写 sideEffects，整棵树就摇不动——代码照常打包，体积纹丝不动。
统一用 ESM 语法，切断 CommonJS 干扰链
Tree Shaking 只认 import/export，不处理 require 或 module.exports。一旦项目里出现以下任一情况，相关模块就会退出摇树流程：
- 源文件中混写
require('./utils')—— 静态分析中断，整块模块被视为“不可判定” - 引入的第三方库只有 CommonJS 版本（如旧版
lodash）—— 即使用插件转译，也可能丢失导出粒度 - 动态导入：
import(`./${name}.js`)或import('./utils').then(...)—— 运行时才决定加载谁，构建阶段无法标记引用
✅ 正确做法：所有内部模块用命名导出 + 命名导入；选库时优先看 package.json 是否含 "type": "module" 或 "exports" 字段。
显式声明 sideEffects，避免误删副作用代码
有些文件虽然没被 import，但执行即生效（比如注入全局样式、打点初始化、修改内置原型），这类代码不能被摇掉。靠 sideEffects 字段告诉打包工具哪些文件“动不得”：
立即学习“Java免费学习笔记（深入）”；
-
"sideEffects": false—— 全包无副作用，放心摇（推荐库作者设此值） -
"sideEffects": ["*.css", "*.scss"]—— 只保留 CSS 类资源，JS 导出全可分析剔除 -
"sideEffects": ["./src/init.js"]—— 仅该文件有副作用，其余仍可按需摇
⚠️ 注意：这个字段必须写在 package.json 根层级，不是配置文件里；Webpack/Rollup 都会读取它。
导出方式决定摇树精度
默认导出（export default { add, subtract }）把多个功能捆成一个对象，工具很难判断你是否只用了其中某个属性；而命名导出（export const add = ...; export const subtract = ...）让每个功能独立可追踪：
- 用户写
import { add } from './math'→ 工具能确认subtract未被引用 → 安全剔除 - 用户写
import math from './math'; math.add()→ 整个 default 对象被标记为“已使用” →subtract留在包里
✅ 库开发建议：拆细导出，提供单独入口（如 import debounce from 'lodash-es/debounce'），比 import { debounce } from 'lodash-es' 更利于摇树。
构建工具配置要到位，别让 Tree Shaking “半身不遂”
Rollup 默认开启完整分析；Webpack 则需要手动补全两步，缺一不可：
- 启用导出标记：
optimization.usedExports: true（开发/生产环境都需显式配置） - 触发实际删除：
minimize: true或指定TerserPlugin—— 因为标记只是“画圈”，压缩器才真正“剪枝”
? 小提示：Webpack 5+ 生产模式（mode: 'production'）虽默认启用部分优化，但 usedExports 仍需手动开，否则不会标记未使用导出。
