JavaScript Tree Shaking死代码消除原理

狼影 2025-10-25 00:00:00 次阅读

Tree Shaking 是一种基于 ES6 模块静态分析的构建优化技术，通过标记并剔除未使用的代码来减小打包体积；它依赖于静态的 import/export 语法，不支持 CommonJS 动态模块，在生产模式下结合 Terser 等压缩工具生效，且需在 package.json 中配置 sideEffects 以帮助构建工具判断代码是否可安全删除。

Tree Shaking 并不是 JavaScript 本身的特性，而是一种在构建阶段通过静态分析消除未使用代码（dead code）的优化技术，常用于现代前端构建工具如 Webpack、Rollup 和 Vite 中。它的核心目标是减小打包体积，只将实际用到的代码包含进最终的输出文件中。

1. 基于 ES6 模块的静态结构

Tree Shaking 能够工作的前提是使用 ES6 模块（import/export），因为它们具有以下特点：

ES6 模块是静态的：模块依赖关系在编译时就已确定，不能动态改变（如 import 在 if 中）
可以进行静态分析：构建工具可以在不运行代码的情况下分析出哪些 export 被 import 了
如果某个 export 没有被任何模块引用，就可以安全地移除

注意：CommonJS 模块（require/module.exports）是动态的，无法在编译时确定依赖关系，因此不支持 Tree Shaking。

2. 标记与剔除未使用代码

构建流程通常分为两个阶段：

标记（Mark）：从入口文件开始，顺着 import 关系图遍历所有被使用的模块和导出函数/变量
剔除（Sweep）：未被标记的代码被视为“死代码”，在最终打包时被排除

例如：

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
// main.js
import { add } from './math.js';
console.log(add(2, 3));

在这个例子中，subtract 函数没有被引入，因此在启用 Tree Shaking 的情况下，它不会被打包进最终结果中。