手动实现 Tree Shaking 的 AST 静态分析指南

本文深入解析了如何手动实现 Tree Shaking 的核心原理与关键技术路径，聚焦于通过静态 AST 分析精准识别并剔除未被实际引用的 ES 模块顶层导出，涵盖导出收集、导入追踪、存活标识构建、副作用保守保留及依赖图递归剪枝等关键环节——它不依赖运行时执行，而完全基于 ESM 的静态可分析性与 strict mode 规范，揭示了“摇掉代码”的本质是编译期的可达性推理，既澄清常见误区（如动态导入、CommonJS 不适用），也强调开发者编码习惯对优化效果的决定性影响，为你亲手打造轻量高效打包插件提供扎实可靠的技术指南。

要手动实现一个支持 Tree Shaking 的简易打包插件，核心不是运行时执行，而是通过静态分析 AST 判断哪些 导出（export）被实际引入（import），再剔除未被引用的顶层声明（如函数、类、变量）。这依赖 ES 模块的静态可分析性，且要求代码符合 strict mode 和 ESM 语法。

1. 明确 Tree Shaking 的作用边界

Tree Shaking 只对 ES 模块顶层的具名导出（named export）和默认导出（default export） 生效，不处理动态 import()、eval、with 或 CommonJS。它不关心运行时逻辑分支，只基于 import/export 的静态引用关系做“可达性分析”。

• 能摇掉：export const unused = 1;（未被任何 import 使用）
• 不能摇掉：export default () => {}; 若有 import X from './x' 就必须保留
• 注意副作用：若模块顶层有无绑定的表达式（如 console.log('init')），默认不能删除（需标记 /*#__PURE__*/ 或配置 sideEffects: false）

2. 解析并遍历 AST 构建引用图

用 acorn 或 @babel/parser 将源码转为 ESTree 格式 AST，然后遍历两次：

• 第一遍（收集导出）：扫描所有 ExportNamedDeclaration、ExportDefaultDeclaration、ExportAllDeclaration，记录导出名 → 声明节点的映射（如 foo → FunctionDeclaration）
• 第二遍（收集导入）：扫描所有 ImportDeclaration，提取 import { foo } from './x' 中的 foo，以及 import x from './x' 对应的 default 导出名（约定为 __DEFAULT__）
• 合并所有被 import 的名字，形成“存活标识集合”

3. 标记并移除未引用的顶层声明

再次遍历 AST，对每个顶层节点判断是否属于“可摇动声明”：

• 匹配类型：FunctionDeclaration、ClassDeclaration、VariableDeclaration（且 kind !== 'let' || 'const' 不影响，关键是是否被导出且未被引用）
• 关键逻辑：若该声明被 export 修饰，且其导出名（或 default）不在“存活集合”中，则打上删除标记
• 生成新 AST 时跳过这些标记节点；注意保留 import 声明和有副作用的表达式（如字面量赋值、函数调用等需保守保留）

4. 输出精简后的代码并处理依赖链

单文件处理只是起点，完整插件需递归处理依赖：

• 用 es-module-lexer 或自解析 import 路径，构建模块图（Module Graph）
• 从入口开始 BFS/DFS，对每个模块执行上述 AST 分析与剪枝
• 最终拼接时，确保 import 语句只保留真正用到的成员（如将 import { a, b, c } from 'x' 改写为 import { a, c } from 'x'）
• 可选：用 recast 或 @babel/generator 生成代码，保持原始格式（缩进/注释）较难，但语义正确是底线

不复杂但容易忽略：Tree Shaking 的效果高度依赖开发者写的代码是否“可静态分析”——避免重命名导出、避免动态属性访问导出对象、默认导出尽量用具名常量而非箭头函数字面量（后者可能被误判为有副作用）。插件本身只是执行器，规范才是前提。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。