WHAT - Tree Shaking 的前提是 ES Module

在 WHAT - Webpack 详解系列（七） 中我们看到：

Tree-shaking 实现的前提是 ES Modules，也就是说：最终交给 Webpack 打包的代码，必须是使用 ES Modules 的方式来组织的模块化。

这是为什么？今天我们就来探讨一下。

Tree-shaking 是一种 消除未使用代码（dead code elimination） 的技术，是一个优化过程，具体同样可以先阅读 WHAT - Webpack 详解系列（七）。它的实现前提之一是 ES Modules (ESM)，主要原因如下：

1. ESM 具有静态结构

• ESM 在编译时即可确定依赖关系和导出内容，因为 import 和 export 语法是静态的，不能在运行时动态修改：

  import { foo } from "./module";
  

• 这种静态分析特性使得编译器（如 Webpack、Rollup、esbuild）可以在构建时直接识别未使用的导出，并进行优化。

ESM 示例（可 tree-shake）：

// module.ts
export const foo = () => console.log("foo");
export const bar = () => console.log("bar");

// main.ts
import { foo } from "./module"; // 只引入了 foo
foo();

• 这里 bar 没有被使用，构建工具可以安全地删除它。

2. CommonJS (CJS) 无法静态分析

• CommonJS 使用 require()，导入是动态的，在运行时才会解析：

  const module = require("./module");
  console.log(module.foo);
  

• 由于 module 是一个对象，它的属性（foo、bar）可能在运行时被修改或动态访问，无法在构建时确定哪些代码未被使用。

CJS 示例（无法 tree-shake）：

// module.js
exports.foo = () => console.log("foo");
exports.bar = () => console.log("bar");

// main.js
const module = require("./module");
module.foo(); // 可能在运行时动态访问 bar，无法优化

• 由于 module 是对象，module.bar 可能在运行时被访问，因此无法安全删除 bar。

3. Tree-shaking 依赖静态分析

• ESM 的静态结构使得构建工具可以直接在代码构建阶段分析哪些模块、函数、变量未被使用，并进行摇树优化（Tree-shaking）。
• CJS 是动态的，构建工具无法可靠确定哪些代码未被使用，因此无法进行 Tree-shaking。

4. 构建工具支持

• Rollup（默认支持 ESM，Tree-shaking 效果最好）
• Webpack（支持 ESM，但需要 mode: 'production' 或 optimization.usedExports）
• esbuild、Vite（基于 ESM，Tree-shaking 效果优秀）

总结

最佳实践：

• 前端项目（React, Vue, Svelte, etc.） ➝ 使用 ESM，配合 Webpack/Vite/rollup 进行 Tree-shaking。
• Node.js 项目 ➝ 如果可以，使用 "type": "module" 迁移到 ESM；如果必须用 CJS，Tree-shaking 就不可行了。

如果你的目标是优化打包体积，请优先使用 ESM，这样构建工具才能高效地进行 Tree-shaking！