17370845950

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。

• 确保 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 链每一环，比调参数更重要。