javascript的tree shaking如何工作_它如何帮助减少最终的打包文件体积【教程】

幻影之瞳 2026-01-17 00:00:00 次阅读

Tree shaking 仅对 ES 模块静态 import/export 有效，CommonJS 动态导入、非顶层 import、默认导出对象及 Babel 转译污染均会阻断；需关闭 Babel 模块转换、确保纯 ES 语法并验证未用代码是否真实剔除。

Tree shaking 只在 ES 模块（import/export）静态结构下有效，CommonJS（require/module.exports）无法被摇掉 —— 这是它起作用的前提，不是配置开关能绕过的。

打包工具（如 Webpack、Rollup、Vite）依赖 AST 分析判断哪些导出从未被引用。一旦出现动态导入或运行时逻辑，就无法安全剔除。

import 必须写在模块顶层，不能包裹在 if、try 或函数里
import('./utils.js') 是动态导入，对应 chunk 不参与主 bundle 的 tree shaking
export 必须是具名或默认导出语句，不能通过 Object.assign(exports, {...}) 或 module.exports = {...} 形式

即使你没用某个函数，如果它被 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 5 默认启用，但前提是你的项目满足 ES 模块条件；若用了 Babel，@babel/preset-env 默认会把 export 编译成 module.exports，直接废掉 tree shaking。

确保 babel.config.js 中关闭模块转换：

module.exports = {
  presets: [
    ['@babel/preset-env', { modules: false }]
  ]
};

最直接的方式是看生成的 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 链每一环，比调参数更重要。