树摇
树摇的核心目的是 在打包阶段消除代码中未使用的部分,从而减小最终打包文件的体积。
树摇的原理
树摇主要是通过 esmodules 的 静态分析。
阶段一:标记(Marking)
- 构建依赖图:
构建工具从项目的入口文件(Entry Point)开始,分析import语句,递归地遍历所有被依赖的模块,形成一个完整的“依赖关系图”(Dependency Graph)。 - 标记“活代码” :在这个过程中,
工具会标记所有被实际import和使用的代码(函数、变量等)。比如,从入口文件开始,所有被执行的代码都被标记为“活”的。当遇到 import { add } from './math.js' 时,add 函数及其依赖的代码也会被标记为“活”的。
阶段二:摇树/清除(Sweeping/Shaking)
- 遍历所有代码:在标记阶段完成后,
工具会遍历代码库中的所有代码。 1. 移除“死代码” :如果一个模块、函数或变量被export了,但在标记阶段没有被标记为“活代码”,那么它就会被认为是“死代码”。(会在打包的时候被清除) - 生成最终产物:构建工具在生成最终的 bundle 文件时,会跳过这些“死代码”,只把“活代码”打包进去。