Tree-shaking 算法（面试深度版）
我给你讲面试官真正想听的 Tree-shaking 算法原理，不是大白话，是能加分的底层逻辑，但我会用最简单的方式讲清楚。
一、一句话概括算法
Tree-shaking 本质是：基于 ES Module 的「可达性分析算法」+ 「DCE（死代码消除）」
从入口文件出发，标记所有被使用到的代码，最后删除未被标记的代码。
二、Tree-shaking 算法完整流程（4 步）
1. 构建模块依赖图（Module Graph）
- 从入口文件（
main.js）开始 - 递归分析所有
import/export - 生成一张模块依赖关系图
2. 标记-清除算法（Mark-Sweep）核心
这就是 Tree-shaking 的真正算法：
① 标记阶段（Mark）
- 从入口开始，递归遍历所有用到的函数、变量
- 只要被引用 = 标记为存活
- 没被引用 = 不标记
② 清除阶段（Sweep）
- 遍历所有代码
- 删除未被标记的代码
和垃圾回收机制（GC）完全一样！
三、算法核心：静态分析（Static Analysis）
Tree-shaking 之所以能实现，靠的是：
ES Module 是静态的
- 编译时就能确定依赖关系
- 不能动态导入
- 不能条件导入
// 静态 ✅ 可以 Tree-shaking
import { a } from './utils'
// 动态 ❌ 无法 Tree-shaking
if (true) import('./utils')
const lib = require('lib')
算法只能分析静态结构，不能分析运行时逻辑。
四、副作用（Side Effect）算法规则
Tree-shaking 不会删除有副作用的代码。
什么是副作用？
代码执行后会影响外部环境，即使没被引用也不能删：
- 修改全局变量
- 立即执行函数
- 操作 DOM
- 赋值给 window
// 有副作用，不会被删除
window.a = 123
document.body.style.color = 'red'
(async function(){})()
算法规则：有副作用 → 强制保留，不参与 shaking
五、Tree-shaking 算法总结（面试背诵版）
Tree-shaking 采用标记-清除算法，基于 ES Modules 静态分析：
- 构建依赖图
- 从入口递归标记所有用到的代码
- 删除未标记、无副作用的死代码
- 最终实现DCE（死代码消除）
它的核心是静态可达性分析，只保留程序执行路径上会用到的代码。
六、一句话超级总结
Tree-shaking = 依赖图 + 标记清除算法 + 静态分析 + 副作用保留 = 只打包用到的代码
如果你愿意，我可以把
Vite + Rollup + Tree-shaking 算法
整合成一段面试满分回答，直接背就能吊打面试官！