#编译概览

#功能概览

我们在启动 Rsdoctor 的首页中，会看到名为 Compile Overall 的一个卡片，可以通过它了解到当前项目编译过程的数据信息，其内容如下图所示：

#名词释义

以下是卡片内每个阶段名词的含义以及代码实现：

#使用说明

#Bootstrap -> BeforeCompile 耗时详情

通过点击 Bootstrap -> BeforeCompile 阶段后的数据会在页面中弹出一个浮层，其内容如下图所示：

其中内容主要为一个图表：

• 横轴 代表 时间
• 纵轴 代表 compiler.hooks.beforeCompile 调用之前所有被插件 tap 过的 hooks
• 图中数据 代表 单个 hook 调用开始到结束。

悬浮到图表中单条数据上，我们会可以在悬浮框中得到以下信息：

• hook 代表 hook 名称
• tap name 代表 .tap 调用时的 name 值
• start 代表 开始时间
• end 代表 结束时间
• duration 代表 持续时间，计算公式为 end - start

#Compile 编译阶段

该部分可以查看导航栏 「Compile Analysis」-> 「Loader Analysis」-> Loader Timeline 来查看 Loader 编译耗时时序图。

#AfterCompile -> done 耗时详情

通过点击 AfterCompile -> Done 阶段后的数据会在页面中弹出一个浮层，其内容如下图所示：

其中内容主要为一个数据统计表格，可以看到调用相关的数据信息，其中字段含义如下：

• Plugin Tap Name 代表 .tap 调用时的 name 值
• Hook 代表 hook 名称
• calls 代表 被调用的次数
• duration(total) 代表 所有调用次数的时间总和

再通过向下滚动页面，我们可以看到对应的图表：

其中内容主要为一个图表：

• 横轴 代表 时间
• 纵轴 代表 compiler.hooks.afterCompile 和 compiler.hooks.done 之间所有被插件 tap 过的 hooks
• 图中数据 代表 单个 hook 调用开始到结束。

悬浮到图表中单条数据上，我们会可以在悬浮框中得到以下信息：

• hook 代表 hook 名称
• tap name 代表 .tap 调用时的 name 值
• start 代表 开始时间
• end 代表 结束时间
• duration 代表 持续时间，计算公式为 end - start

#Minify 耗时详情

通过点击 Minify 阶段后的数据会在页面中弹出一个浮层，其内容如下图所示：

整个浮层中的数据含义与前面的段落内容基本一致，此处不再重复介绍。

#参考文档

• Rspack Hooks
• Webpack Hooks