> For AI agents: the complete documentation index is available at /zh/llms.txt, the full documentation bundle is available at /zh/llms-full.txt.

# 编译概览

## 功能概览

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

![](https://assets.rspack.rs/others/assets/rsdoctor/compile-overall-1.jpg)
:::tip
每个编译阶段的数据，如果时间数据显示为蓝色
，均代表着可以点击查看内部的耗时详情
。
:::
## 名词释义

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

| 阶段名称                                     | 描述说明                     | 代码实现                                                                                                                                                                    |
| ---------------------------------------- | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <b><i>Bootstrap -> BeforeCompile</i></b> | 代表项目从启动到开始编译之前的耗时        | <ul><li>在 **compiler.hooks.beforeCompile** 被调用时上报 [process.uptime()](https://nodejs.org/dist/latest-v22.x/docs/api/process.html#processuptime) 作为<b>本阶段耗时</b></li></ul> |
| <b><i>Compile</i></b>                    | 代表项目的整个编译耗时              | <ul><li>在 **compiler.hooks.beforeCompile** 被调用时的时间点作为<b>开始时间</b>，在 **compiler.hooks.afterCompile** 被调用时的时间点作为<b>结束时间</b></li></ul>                                      |
| <b><i>AfterCompile -> Done</i></b>       | 代表编译结束到整个流程结束的耗时         | <ul><li>在 **compiler.hooks.afterCompile** 被调用时的时间点作为<b>开始时间</b>，在 **compiler.hooks.done** 被调用时的时间点作为<b>结束时间</b></li></ul>                                               |
| <b><i>Minify</i></b>                     | 绝大部分情况下，代表项目编译流程内文件压缩的耗时 | <ul><li>统计 **compilation.hooks.optimizeChunkAssets** 和 **compilation.hooks.processAssets** 每次<b>调用时间之和</b></li></ul>                                                    |

## 使用说明

### Bootstrap -> BeforeCompile 耗时详情

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

![](https://assets.rspack.rs/others/assets/rsdoctor/compile-overall-boostrap.jpg)
其中内容主要为一个图表：

- **横轴** 代表 **时间**
- **纵轴** 代表 **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**](/zh/guide/usage/loaders-timeline.md) 来查看 Loader 编译耗时时序图。

### AfterCompile -> done 耗时详情

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

![](https://assets.rspack.rs/others/assets/rsdoctor/compile-overall-aftercompile-1.jpg)
其中内容主要为一个数据统计表格，可以看到调用相关的数据信息，其中字段含义如下：

- **Plugin Tap Name** 代表 [.tap 调用时的 name 值](https://github.com/webpack/tapable#hookhookmap-interface)
- **Hook** 代表 **hook 名称**
- **calls** 代表 **被调用的次数**
- **duration(total)** 代表 **所有调用次数的时间总和**

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

![](https://assets.rspack.rs/others/assets/rsdoctor/compile-overall-aftercompile-2.jpg)
其中内容主要为一个图表：

- **横轴** 代表 **时间**
- **纵轴** 代表 **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 耗时详情

:::tip
Rspack 项目中暂时获取不到 Minify 耗时详情。
:::

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

| <img src="https://assets.rspack.rs/others/assets/rsdoctor/compile-overall-minify-1.jpg" /> | <img src="https://assets.rspack.rs/others/assets/rsdoctor/compile-overall-minify-2.jpg" /> |
| ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ |

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

## 参考文档

- [**Rspack Hooks**](https://rspack.rs/api/plugin-api/compiler-hooks#beforecompile)