Tree Shaking 原理

以下是关于 Tree Shaking 原理的系统化知识总结，涵盖底层机制、实现条件和最佳实践：

一、Tree Shaking 的本质

1. 核心定义

   • 现代打包工具（Webpack/Rollup）通过静态分析消除未使用代码（Dead Code Elimination）的优化策略
   • 术语源自「摇树」动作：摇动代码树，让未被引用的「死代码」像枯叶一样掉落

2. 与传统DCE的区别

   • 传统 DCE：消除执行不到的代码（如 if(false){…}）
   • Tree Shaking：消除未被引用的导出（export）代码

二、实现原理的三层机制

1. 模块静态分析阶段

• 依赖图谱构建
  通过 AST（抽象语法树）分析模块间的导入导出关系，建立模块依赖图谱

  // 入口文件
  import { a } from './module';
  console.log(a);// module.js
  export const a = 1;  // 被使用
  export const b = 2;  // 未被使用 → 将被摇掉
  

• ES Module 的关键作用
  ES6 模块的静态特性（编译时加载）使得依赖关系可静态分析，这是 Tree Shaking 的基础

2. 副作用标记阶段

• 副作用检测算法
  通过代码静态分析识别可能产生副作用的代码（如全局变量修改、函数调用等）

  // 有副作用（无法安全移除）
  export const utils = {init() { window.config = {} } // 修改全局对象
  }// 无副作用（可安全移除）
  export const pureAdd