WHAT - Tree Shaking 的前提是 ES Module

目录

• [1. ESM 具有静态结构](#1. ESM 具有静态结构)
• [2. CommonJS (CJS) 无法静态分析](#2. CommonJS (CJS) 无法静态分析)
• [3. Tree-shaking 依赖静态分析](#3. Tree-shaking 依赖静态分析)
• [4. 构建工具支持](#4. 构建工具支持)
• 总结

在 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 效果优秀）

总结

	ES Modules (ESM)	CommonJS (CJS)
导入方式	import { foo } from "./module"	const module = require("./module")
是否静态	✅ 静态，编译时可分析	❌ 动态，运行时才确定
Tree-shaking 支持	✅ 支持（构建时可优化未使用的代码）	❌ 不支持（构建时无法安全删除代码）
推荐使用	✅ 推荐（现代前端最佳实践）	🚫 仅用于 Node.js 兼容场景

最佳实践：

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

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