> For AI agents: the complete documentation index is available at https://rsdoctor.rs/zh/llms.txt, the full documentation bundle is available at https://rsdoctor.rs/zh/llms-full.txt.
# 编译概览
## 功能概览
我们在启动 **Rsdoctor** 的首页中，会看到名为 `Compile Overall` 的一个卡片，可以通过它了解到当前项目**编译过程**的数据信息，其内容如下图所示：
:::tip
每个编译阶段的数据，如果时间数据显示为蓝色
，均代表着可以点击查看内部的耗时详情
。
:::
## 名词释义
以下是卡片内每个阶段名词的含义以及代码实现：
| 阶段名称 | 描述说明 | 代码实现 |
| ---------------------------------------- | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Bootstrap -> BeforeCompile | 代表项目从启动到开始编译之前的耗时 | - 在 **compiler.hooks.beforeCompile** 被调用时上报 [process.uptime()](https://nodejs.org/dist/latest-v22.x/docs/api/process.html#processuptime) 作为本阶段耗时
|
| Compile | 代表项目的整个编译耗时 | - 在 **compiler.hooks.beforeCompile** 被调用时的时间点作为开始时间，在 **compiler.hooks.afterCompile** 被调用时的时间点作为结束时间
|
| AfterCompile -> Done | 代表编译结束到整个流程结束的耗时 | - 在 **compiler.hooks.afterCompile** 被调用时的时间点作为开始时间，在 **compiler.hooks.done** 被调用时的时间点作为结束时间
|
| Minify | 插件处理产物的总耗时，包括代码压缩 | 累加在 **compilation.hooks.processAssets** 上采集到的插件回调耗时 |
## 使用说明
### Bootstrap -> BeforeCompile 耗时详情
通过**点击 `Bootstrap -> BeforeCompile` 阶段后的数据**会在页面中弹出一个浮层，其内容如下图所示：
其中内容主要为一个图表：
- **横轴** 代表 **时间**
- **纵轴** 代表 **compiler.hooks.beforeCompile** 调用之前所有**被插件 tap** 过的 **hooks**
- **图中数据** 代表 **单个 hook 调用开始到结束**。
悬浮到图表中单条数据上，我们会可以在悬浮框中得到以下信息：
- **hook** 代表 **hook 名称**
- **tap name** 代表 [.tap 调用时的 name 值](https://github.com/webpack/tapable#hookhookmap-interface)
- **start** 代表 **开始时间**
- **end** 代表 **结束时间**
- **duration** 代表 **持续时间，计算公式为 `end - start`**
### Compile 编译阶段
该部分可以查看导航栏 「Compile Analysis」-> 「Loader Analysis」-> [**Loader Timeline**](https://rsdoctor.rs/zh/guide/usage/loaders-timeline.md) 来查看 Loader 编译耗时时序图。
### AfterCompile -> done 耗时详情
通过**点击 `AfterCompile -> Done` 阶段后的数据**会在页面中弹出一个浮层，其内容如下图所示：
其中内容主要为一个数据统计表格，可以看到调用相关的数据信息，其中字段含义如下：
- **Plugin Tap Name** 代表 [.tap 调用时的 name 值](https://github.com/webpack/tapable#hookhookmap-interface)
- **Hook** 代表 **hook 名称**
- **calls** 代表 **被调用的次数**
- **duration(total)** 代表 **所有调用次数的时间总和**
再通过**向下滚动页面**，我们可以看到对应的图表：
其中内容主要为一个图表：
- **横轴** 代表 **时间**
- **纵轴** 代表 **compiler.hooks.afterCompile** 和 **compiler.hooks.done** 之间所有**被插件 tap** 过的 **hooks**
- **图中数据** 代表 **单个 hook 调用开始到结束**。
悬浮到图表中单条数据上，我们会可以在悬浮框中得到以下信息：
- **hook** 代表 **hook 名称**
- **tap name** 代表 [.tap 调用时的 name 值](https://github.com/webpack/tapable#hookhookmap-interface)
- **start** 代表 **开始时间**
- **end** 代表 **结束时间**
- **duration** 代表 **持续时间，计算公式为 `end - start`**
### Minify 耗时详情 \{#minify-details}
启用代码压缩（`optimization.minimize`）后，如果采集到了相关插件的耗时数据，报告中就会显示 `Minify`。点击旁边的 `detail`，可以查看各插件的耗时和执行时间线。
插件耗时数据由 [`features.plugins`](https://rsdoctor.rs/zh/config/options/features.md) 控制采集，该功能默认开启。
| 
| 
|
| ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ |
## 参考文档
- [**Rspack Hooks**](https://rspack.rs/api/plugin-api/compiler-hooks#beforecompile)