Tree Shaking 原理

问题

Tree Shaking 是什么，它是如何工作的？

解答

Tree Shaking 是一种通过清除多余代码来优化项目打包体积的技术，专业术语叫 Dead Code Elimination（死代码消除）。

为什么需要 ES6 模块

虽然 Tree Shaking 的概念在 1990 年就提出了，但直到 ES6 模块出现后才真正被利用起来。

CommonJS 的问题

CommonJS 使用动态导入，可以基于条件加载模块：

let dynamicModule;
// 动态导入
if (condition) {
  myDynamicModule = require("foo");
} else {
  myDynamicModule = require("bar");
}

这种动态特性导致无法在实际运行前确定需要哪些模块，因此不适合 Tree Shaking。

ES6 模块的优势

ES6 引入了完全静态的导入语法，不支持条件导入：

// ❌ 不可行，ES6 的 import 是完全静态的
if (condition) {
  import foo from "foo";
}

必须先导入所有模块，再进行条件使用：

import foo from "foo";
import bar from "bar";

if (condition) {
  // 使用 foo
} else {
  // 使用 bar
}

ES6 的静态导入语法可以在代码不运行的情况下就分析出不需要的代码，这是 Tree Shaking 的基础。

工作原理

Tree Shaking 的实现依赖两个步骤：

1. 静态分析：通过 ES6 Module 的静态特性，在编译时分析出加载了哪些模块
2. 死代码消除：分析程序流，判断哪些模块和变量未被使用或引用，删除对应代码

整个依赖树可以被静态地推导出解析语法树（AST），从而准确识别并移除未使用的代码。

关键点

• Tree Shaking 依赖 ES6 模块的静态导入特性，CommonJS 的动态导入无法支持
• 通过静态分析在编译时确定模块依赖关系，无需运行代码
• 分析程序流，删除未被使用或引用的模块和变量
• 整个过程基于 AST（抽象语法树）进行依赖分析