树摇

29 阅读1分钟

树摇

树摇的核心目的是 在打包阶段消除代码中未使用的部分,从而减小最终打包文件的体积。

树摇的原理

树摇主要是通过 esmodules 的 静态分析

阶段一:标记(Marking)

  1. 构建依赖图构建工具从项目的入口文件(Entry Point)开始,分析 import 语句,递归地遍历所有被依赖的模块,形成一个完整的“依赖关系图”(Dependency Graph)。
  2. 标记“活代码” :在这个过程中,工具会标记所有被实际 import使用的代码(函数、变量等)。比如,从入口文件开始,所有被执行的代码都被标记为“”的。当遇到 import { add } from './math.js' 时,add 函数及其依赖的代码也会被标记为“活”的。

阶段二:摇树/清除(Sweeping/Shaking)

  1. 遍历所有代码:在标记阶段完成后,工具会遍历代码库中的所有代码。 1. 移除“死代码” :如果一个模块、函数或变量被 export 了,但在标记阶段没有被标记为“活代码”,那么它就会被认为是“死代码”。(会在打包的时候被清除
  2. 生成最终产物:构建工具在生成最终的 bundle 文件时,会跳过这些“死代码”,只把“活代码”打包进去。