Tree shaking 仅对 ES 模块静态 import/export 有效，CommonJS 动态导入、非顶层 import、默认导出对象及 Babel 转译污染均会阻断；需关闭 Babel 模块转换、确保纯 ES 语法并验证未用代码是否真实剔除。
Tree shaking 只在 ES 模块（import/export）静态结构下有效，CommonJS（require/module.exports）无法被摇掉 —— 这是它起作用的前提，不是配置开关能绕过的。
为什么 import 语句必须是静态的
打包工具（如 Webpack、Rollup、Vite）依赖 AST 分析判断哪些导出从未被引用。一旦出现动态导入或运行时逻辑，就无法安全剔除。
-
import必须写在模块顶层，不能包裹在if、try或函数里 -
import('./utils.js')是动态导入，对应 chunk 不参与主 bundle 的 tree shaking -
export必须是具名或默认导出语句，不能通过Object.assign(exports, {...})或module.exports = {...}形式
export 写法直接影响能否被摇掉
即使你没用某个函数，如果它被 export 且导出方式“不干净”，打包器可能保守保留整块代码。
- ✅ 安全可摇：
export const foo = () => {}; export default class Bar {} - ⚠️ 风险高（可能保留在 bundle 中）：
const utils = { foo() {}, bar() {} }; export default utils;—— 工具无法确认utils.bar是否被解构使用 - ❌ 基本不摇：
export default { foo: () => {}, bar: () => {} };—— 默认导出对象后，任何消费方都可能用obj.bar访问，无法推断
Webpack 中开启 tree shaking 的关键配置
Webpack 5 默认启用，但前提是你的项目满足 ES 模块条件；若用了 Babel，@babel/preset-env 默认会把 export 编译成 module.exports，直接废掉 tree shaking。
立即学习“Java免费学习笔记（深入）”；
- 确保
babel.config.js中关闭模块转换：module.exports = { presets: [ ['@babel/preset-env', { modules: false }] ] }; -
package.json中声明"type": "module"或确保所有源码用.mjs后缀（非必需，但可避免混淆） - 不要在
optimization.usedExports上手动设false—— 它默认true，用于标记未使用导出
如何验证 tree shaking 是否生效
最直接的方式是看生成的 bundle 是否包含未使用的 export 对应代码，而不是依赖文件体积数字。
- 用
webpack --mode=production --stats=verbose构建后，在 stats 输出中搜索unusedExports字段 - Vite 用户可加
build.rollupOptions.treeshake: 'smallest'并配合rollup-plugin-visualizer查看模块依赖图 - 在源码中故意写一个未使用的
export const deadCode = () => console.log('x');，然后检查最终 bundle 里是否还存在console.log('x')字符串
真正卡住 tree shaking 的往往不是配置，而是混合了 CommonJS 依赖、Babel 转译污染、或默认导出对象这类“看起来像模块、实则不可分析”的写法。检查入口模块的 import 链每一环，比调参数更重要。
