@rsdoctor/docs 0.0.1

package/docs/zh/guide/usage/bundle-overall.mdx

@@ -0,0 +1,57 @@
+# 产物概览
+
+## 功能概览
+
+我们在启动 **Rsdoctor** 的首页中，会看到名为 `Bundle Overall` 的一个卡片，可以通过它了解到当前项目**构建产物**的信息，其内容如下图所示：
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/overall/bundle-overall-1.jpg"
+  width="400px"
+  height="500px"
+  style={{ margin: 'auto' }}
+/>
+
+## 名词释义
+
+| 名词                             | 描述说明                                                                           |
+| -------------------------------- | ---------------------------------------------------------------------------------- |
+| <b><i>total files</i></b>        | 代表产物中所有文件的数量                                                           |
+| <b><i>total size</i></b>         | 代表产物中所有文件的总体积                                                         |
+| <b><i>js files</i></b>           | 代表产物中所有 `.js` 的文件数量                                                    |
+| <b><i>css files</i></b>          | 代表产物中所有 `.css` 文件数量                                                     |
+| <b><i>image files</i></b>        | 代表产物中所有 `.png`/`.jpg`/`.svg`/`.webp`/`.jpeg`/`.gif`/`.bmp` 的文件数量       |
+| <b><i>font files</i></b>         | 代表产物中所有 `.ttf`/`.fnt`/`.fon`/`.otf`/`.woff`/`.woff2` 的文件数量             |
+| <b><i>media files</i></b>        | 代表产物中所有 `.mp3`/`.mp4`/`.avi`/`.wav`/`.flv`/`.mov`/`.mpg`/`.mpeg` 的文件数量 |
+| <b><i>html files</i></b>         | 代表产物中所有 `.html` 的文件数量                                                  |
+| <b><i>modules</i></b>            | 代表产物中 module 总数                                                             |
+| <b><i>duplicate packages</i></b> | 代表产物中存在的重复包总数                                                         |
+
+## 使用说明
+
+### View Bundle Artifacts
+
+- 卡片上的 **「TOTAL Size」** 数据是项目的总大小。点击该数字可以跳转到 [Bundle Size 页面](./bundle-size.mdx)
+
+- 卡片上还可以查看到不同类型文件的个数及总 Size，点击对应的蓝色图标则可以查看到对应的文件列表，如下图：
+  - **Initial:** 是指该资源是入口的主 Chunk。
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/overall/bundle-overall-files.png"
+  width="400px"
+  height="600px"
+  style={{ margin: 'auto' }}
+/>
+
+### [Duplicate Packages](../../blog/topic/duplicate-pkg-problem.mdx)
+
+如果卡片中的 `Duplicate Packages` 显示的数字大于 0，则可以**点击来查看对应的重复包详情列表**，其内容如下图所示：
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/overall/bundle-overall-dup-pkg.jpg"
+  width="600px"
+  style={{ margin: 'auto' }}
+/>
+
+我们可以看到当前 Rsdoctor 在本次构建产物中检测出来的所有重复包的列表。
+
+更多请查看[重复第三方包](/guide/usage/bundle-alerts)。

package/docs/zh/guide/usage/bundle-size.mdx

@@ -0,0 +1,122 @@
+# 产物分析
+
+## 功能介绍
+
+**Rsdoctor** 提供了 `Bundle Size` 模块，该模块主要用于分析 **Webpack** 或 **Rspack** 构建产物的信息，包括当前编译产物的**资源大小**、**重复包**、**模块引用关系**等：
+
+- **产物概览**：展示产物总数、各类型文件数目、大小以及占比，以及重复包和重复包的引用链；
+- **产物分析（`Bundle Analysis`）模块**：分析构建产物资源（**Assets**）以及所包含的 **Modules** 的大小和代码信息。在该模块中，可以查看 Assets 中 **Module 打包后的实际代码大小**，以及模块的原始代码或**打包后的代码段**以及**模块引用关系**。
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundle-size-overall.png"
+  width={'700px'}
+  style={{ margin: 'auto' }}
+/>
+
+点击**导航栏 「Bundle Size」-> 「Bundle Size」选项**，即可查看 Bundle 分析报告。请注意，要展示此页面，需要开启构建产物分析能力 [features](/config/options/options)。
+
+### 名词解释
+
+- **`Assets`**：资源是对图像、字体、媒体和其他文件类型的统称，是最终存在于输出文件夹内的文件，同时，每个 Chunk 都有对应的 [Assets 资源](https://webpack.js.org/concepts/under-the-hood/#chunks)。
+- **`Module`**：一个或多个 Module 组合成了 Chunk。有关 Module 类型的详细信息，请参阅 [Rspack Modules](https://www.rspack.dev/api/modules.html) 和 [Webpack Modules](https://webpack.js.org/concepts/modules/#what-is-a-webpack-module)。
+- **`Bundle Size`**：资源产物的最终打包大小，这是构建器处理后的最终大小。
+- **`Module Bundled Source & Size`**：**Module Parsed Source** 是指 **Module** 在打包产物中的最终代码片段，**Module Parsed Size** 是指 **Module** 在打包产物中的最终代码片段的大小。
+- **`Package Count`**：第三方包的数量。
+- **`Initial Chunk`**: **initial(初始化)** 是入口起点的主 Chunk，该 chunk 包含入口起点指定的所有模块及其依赖项，与「**按需加载**」的 **Chunk** 资源不同。
+  - 有关 Initial Chunk 的详细信息，请参阅 [Initial Chunk 介绍](https://webpack.js.org/concepts/under-the-hood/#chunks)。
+- **`Duplicate Packages`**: 打包到项目中的重复的第三方包。不包括未打包进产物的第三方包，请参阅[重复第三方包](/guide/usage/bundle-alerts)。
+- **`Concatenated Module`**: 串联模块是将多个模块在打包时提升或串联到一个闭包中。在过去，Webpack 在打包时会将每个模块都打包到单独的闭包中，这种封装函数会导致 JavaScript 在浏览器中执行时较慢。可以通过打开 [`optimization.concatenateModules`](https://webpack.js.org/plugins/module-concatenation-plugin/#root) 参数来进行优化。
+
+## 产物概览
+
+### 产物信息卡
+
+产物概览显示了 `Total Files` 等文件数目和大小信息。点击卡片图表可以展开资源详情，如下图所示：
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundle-size-overall-1.png"
+  width={'700px'}
+  style={{ margin: 'auto' }}
+/>
+
+- 点击详情小图标，右侧会展示对应资源树，标明资源大小：
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundle-size-tree.png"
+  width={'300px'}
+  height={'400px'}
+  style={{ margin: 'auto' }}
+/>
+
+- 点击标签切换资源信息查看，例如：**「Total JS | Initial JS」**。同时，卡片上展示了资源的体积占比、体积大小以及资源数目。同样，点击右下图标可以展开资源列表。
+
+### 重复第三方包
+
+- **Duplicate Packages** 卡片上展示了项目中重复的第三方包数量。点击图片可以查看重复第三方包的具体详情。请注意，这里的第三方包是被打包的第三方包。
+
+更多信息，请参阅[重复第三方包](/guide/usage/bundle-alerts)
+
+## 产物分析
+
+::: tip
+如果项目基于 Rspack 且版本低于 0.5.1，无法查看代码信息。
+:::
+
+### 资源与模块关系展示
+
+**Bundle Analysis** 模块用于分析构建产物资源（**Assets**）以及所包含的 **Modules** 的大小和代码信息。示例图如下：
+
+- 左侧是 **Assets** 资源列表，按照资源大小降序排列，可以点击 **「expand all」** 按钮展开全部节点。
+- 右侧是 **Assets** 对应的 **Modules** 列表，同样按照打包后模块大小降序排列。
+
+<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundle-size-analysis-tree.png" />
+
+### 搜索筛选框
+
+顶部工具栏从左到右依次是：搜索 `Assets` 工具、筛选 `Assets` 大小工具、筛选 `Module` 大小工具。
+
+- **搜索 Entry 输入框**：在输入框中输入 **Entry** 的关键词，可以搜索对应的 **Entry**，只展示该 **Entry** 下的 **Assets** 等。
+- **搜索 Assets 输入框**：在输入框中输入 `Assets` 的关键词，可以搜索对应的 `Assets`。
+- **Assets Size 筛选工具**：填写数字，单位为：KB、MB，可以过滤掉小于所填 `Size` 的 `Assets` 资源。
+- **Module Size 筛选工具**：填写数字，单位为：KB、MB，可以过滤掉小于所填 `Size` 的 `Module` 资源。
+
+<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundle-size-analysis-selects.png" />
+
+### 模块标签说明
+
+**Assets** 标签如左图所示，从左到右依次代表：**资源体积**、**[Initial Chunk](https://webpack.js.org/concepts/under-the-hood/#chunks)** 和 **代码查看**。
+
+<div style={{ display: 'flex' }}>
+  <img
+    src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundle-size-assets-tags.png"
+    height="200px"
+    width="360px"
+    style={{ margin: 'auto' }}
+  />
+  <img
+    src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundle-size-modules-tags.png"
+    height="300px"
+    width="440px"
+    style={{ margin: 'auto' }}
+  />
+</div>
+
+**Modules** 标签如右图所示，从左到右依次代表：
+
+- **Bundled Size**
+  - 模块打包进产物的最终大小。一些标有 `concatenated` 的模块是串联模块，对此值有一定影响，请参阅下方的 `concatenated module` 解释。
+- **[Concatenated Module](https://webpack.js.org/plugins/module-concatenation-plugin/#root)** 串联模块，串联模块是将多个模块在打包时提升或串联到一个闭包中。有两种类型：
+  - 一种是串联主模块，标明串联了多少个 `Modules`；
+  - 另一种是被串联的子模块，标明被聚合到了哪个 `Module` 内。这种子模块无法继续拆解打包后的代码，因此无法得知具体的 `Bundled Size`，只能得知整个串联模块的大小，该大小标注在主模块尾部。
+- **Module Explorer** 标签：点击可打开 `Module` 之间的依赖关系分析页面。
+- **代码查看** 标签，点击可展开代码段，包括 `Source`（源码）、`Transformed`（编译后代码）和 `Bundled`（打包后代码）。
+
+## 产物总览瓦片图
+
+点击 **「Bundle Size」** 页面的 **「Bundle Analyzer Graph」** 按钮，可以查看经典的瓦片图。
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundle-size-tile-graph.png"
+  width="500px"
+  style={{ margin: 'auto' }}
+/>

package/docs/zh/guide/usage/compile-alerts.mdx

@@ -0,0 +1,18 @@
+# 编译预警
+
+我们还集成了一些基于编译数据做检测的能力，如果本次编译结果中，存在命中了我们定义的[规则](../more/rules)的数据，则会在 **Rsdoctor** 主界面下方出现 `Compile Alerts` 模块，参考下图所示：
+
+<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/compile/compile-alerts.png" />
+
+通过该模块可以比较直观的看到我们项目在编译方面的一些预警信息，有助于我们可以更进一步优化项目的编译性能。
+
+## 规则
+
+目前编译规则有：
+
+:::tip
+[规则列表](../more/rules)
+:::
+
+- `E1002` 默认导入检查。
+- `E1003` Loader 性能检查。

package/docs/zh/guide/usage/compile-overall.mdx

@@ -0,0 +1,115 @@
+# 编译概览
+
+## 功能概览
+
+我们在启动 **Rsdoctor** 的首页中，会看到名为 `Compile Overall` 的一个卡片，可以通过它了解到当前项目**编译过程**的数据信息，其内容如下图所示：
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/overall/compile-overall-1.jpg"
+  width="400px"
+  height="600px"
+  style={{ margin: 'auto' }}
+/>
+
+:::tip
+每个编译阶段的数据，如果时间数据显示为<u>蓝色</u>，均代表着可以<u>点击查看内部的耗时详情</u>。
+:::
+
+## 名词释义
+
+以下是卡片内每个阶段名词的含义以及代码实现：
+
+| 阶段名称                                 | 描述说明                                         | 代码实现                                                                                                                                                                                                            |
+| ---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <b><i>Bootstrap -> BeforeCompile</i></b> | 代表项目从启动到开始编译之前的耗时               | <ul><li>`Webpack` or `Rspack` 项目中：在 **compiler.hooks.beforeCompile** 被调用时上报 [process.uptime()](https://nodejs.org/dist/latest-v18.x/docs/api/process.html#processuptime) 作为<b>本阶段耗时</b></li></ul> |
+| <b><i>Compile</i></b>                    | 代表项目的整个编译耗时                           | <ul><li>`Webpack` or `Rspack` 项目中：在 **compiler.hooks.beforeCompile** 被调用时的时间点作为<b>开始时间</b>，在 **compiler.hooks.afterCompile** 被调用时的时间点作为<b>结束时间</b></li></ul>                     |
+| <b><i>AfterCompile -> Done</i></b>       | 代表编译结束到整个流程结束的耗时                 | <ul><li>`Webpack` or `Rspack` 项目中：在 **compiler.hooks.afterCompile** 被调用时的时间点作为<b>开始时间</b>，在 **compiler.hooks.done** 被调用时的时间点作为<b>结束时间</b></li></ul>                              |
+| <b><i>Minify</i></b>                     | 绝大部分情况下，代表项目编译流程内文件压缩的耗时 | <ul><li>`Webpack` or `Rspack` 项目中：统计 **compilation.hooks.optimizeChunkAssets** 和 **compilation.hooks.processAssets** 每次<b>调用时间之和</b></li></ul>                                                       |
+
+## 使用说明
+
+### Bootstrap -> BeforeCompile 耗时详情
+
+通过**点击 `Bootstrap -> BeforeCompile` 阶段后的数据**会在页面中弹出一个浮层，其内容如下图所示：
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/overall/compile-overall-boostrap.jpg"
+  width="600px"
+  style={{ margin: 'auto' }}
+/>
+
+其中内容主要为一个图表：
+
+- **横轴** 代表 **时间**
+- **纵轴** 代表 **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**](./loaders-timeline.mdx) 来查看 Loader 编译耗时时序图。
+
+### AfterCompile -> Done 耗时详情
+
+通过**点击 `AfterCompile -> Done` 阶段后的数据**会在页面中弹出一个浮层，其内容如下图所示：
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/overall/compile-overall-aftercompile-1.jpg"
+  width="600px"
+  height="400px"
+  style={{ margin: 'auto' }}
+/>
+
+其中内容主要为一个数据统计表格，可以看到调用相关的数据信息，其中字段含义如下：
+
+- **Plugin Tap Name** 代表 [.tap 调用时的 name 值](https://github.com/webpack/tapable#hookhookmap-interface)
+- **Hook** 代表 **hook 名称**
+- **calls** 代表 **被调用的次数**
+- **duration(total)** 代表 **所有调用次数的时间总和**
+
+再通过**向下滚动页面**，我们可以看到对应的图表：
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/overall/compile-overall-aftercompile-2.jpg"
+  width="600px"
+  style={{ margin: 'auto' }}
+/>
+
+其中内容主要为一个图表：
+
+- **横轴** 代表 **时间**
+- **纵轴** 代表 **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://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/overall/compile-overall-minify-1.jpg" /> | <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/overall/compile-overall-minify-2.jpg" /> |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+
+整个浮层中的数据含义与前面的段落内容基本一致，此处不再重复介绍。
+
+## 参考文档
+
+- [**Rspack Hooks**](https://www.rspack.dev/api/plugin-api.html#beforecompile)
+- [**Webpack Hooks**](https://webpack.js.org/api/compilation-hooks/)

package/docs/zh/guide/usage/loaders-analysis.mdx

@@ -0,0 +1,73 @@
+# Loaders 分析
+
+**Rsdoctor** 提供了 `Loader Analysis` 模块，该模块主要功能是提供的针对 **目录与文件维度** 的 Loader 统计数据，来帮助你更好的针对分析**文件夹**以及**单个文件**在 Loader 编译中的情况。
+
+点击导航栏 「Compile Analysis」-> 「Loader Analysis」选项，即可查看编译时分析报告。当然这个页面需要开启 `loader` 分析能力才会展示 [features](/config/options/options)
+
+## 概览
+
+首先，我们在该模块可以直接看到所有被 Loader 所处理过的文件树结构，如下图所示：
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/compile/loader-anlaysis-all.png"
+  width="600px"
+  style={{ margin: 'auto' }}
+/>
+
+可以看到在头部的**筛选搜索框**中，我们可以进行 **Loader 筛选** 与 **文件名搜索**，填入后动态展示匹配条件的文件树，可以更方便的定位我们想要查询的文件。
+
+而在下方文件树结构中，我们可以通过两种交互形式，来获得不同的数据信息，分别是
+
+- 「**点击目录**」：展示 **文件目录的 Loaders 数据**。
+
+- 「**点击文件**」：展示 **单个文件的 Loaders 详情**。
+
+在下方的段落中，会介绍对应详细的内容。
+
+## 文件目录的 Loaders 数据
+
+通过 **点击选中目录** 可以在 文件树 的右侧，看到当前**选中目录下所有 Loader 的耗时统计数据**（[**预估耗时**](../../guide/more/faq#loader-%E8%80%97%E6%97%B6%E6%95%B0%E6%8D%AE%E4%B8%8D%E5%87%86)），即 `"Statistics of xxx"` 的卡片内容如下图所示：
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/compile/loader-anlaysis-table.png"
+  width="300px"
+  height="400px"
+  style={{ margin: 'auto' }}
+/>
+
+其中，我们可以获得主要的信息如下：
+
+- **单个 Loader** 在选中目录内处理的 **文件数** 和 **预估耗时**
+- **所有 Loader** 在选中目录内处理的 **文件数** 和 **预估耗时**
+
+通常来说，我们可以通过**选中 `node_modules`** 内的一些**三方库目录**，然后根据 Loader 的耗时信息，来判断我们是不是有必要要给这个目录设置 [module.rule.exclude](https://webpack.js.org/configuration/module/#ruleexclude)，来减少比如常见的 `babel-loader` 的处理耗时长的问题。
+
+如果是一些存在**高级 ES 语法**的 三方库 或者 **workspace** 内的包，需要根据下个段落的内容，来进行更细粒度的单文件级别的内容判断，来决策如何优化 Loader 耗时。
+
+## 单个文件的 Loaders 详情
+
+通过 **点击文件** 则会弹出一个遮罩层，其中内容组成如下：
+
+- 「**模块左侧**」：当前点击的文件 **所有执行过的 Loader 列表**以及 **Loader 编译本文件的耗时**。
+
+- 「**模块右侧**」：当前选中的 Loader **调用时**的**输入输出**和**参数数据信息**。
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/compile/loader-analysis-code-change.png"
+  width="600px"
+  style={{ margin: 'auto' }}
+/>{' '}
+
+- **参数数据信息**：点击「**show more**」或者左上角展开按钮，可查看对应参数信息。
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/compile/loader-analysis-options.png"
+  width="600px"
+  style={{ margin: 'auto' }}
+/>{' '}
+
+如图所示，我们可以获得 **目标文件** 的以下信息：
+
+- **所经过的所有 Loader**
+- **[Loader Context](https://webpack.js.org/api/loaders/#the-loader-context) 上的参数数据**
+- **Loader 的输入输出**

package/docs/zh/guide/usage/loaders-timeline.mdx

@@ -0,0 +1,68 @@
+# Loaders 时序图
+
+## 功能概览
+
+我们在 **Rsdoctor** 的导航栏上点击 「Compile Analysis」-> 「Loader Analysis」选项的二级菜单 「Loaders Timeline」，可以看到当前项目中所有 Loader 的**执行时序图**，当然这个页面需要开启 `loader` 分析能力才会展示 [features](/config/options/options)，其内容如下图所示：
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/compile/loader-timeline-overall.png"
+  width="700"
+  style={{ margin: 'auto' }}
+/>
+
+## 名词释义
+
+页面中图表内的字段含义如下：
+
+| 名词                                 | 描述说明                                                                                     |
+| ------------------------------------ | -------------------------------------------------------------------------------------------- |
+| <b><i>files</i></b>                  | 代表 Loader 处理的**文件总数**                                                               |
+| <b><i>files(node_modules)</i></b>    | 代表 Loader 处理 `node_modules` 内的文件数量                                                 |
+| <b><i>files(outside the cwd)</i></b> | 代表 Loader 处理 `cwd` 之外的文件数量                                                        |
+| <b><i>duration</i></b>               | 代表 Loader 执行的**预估耗时**                                                               |
+| <b><i>start(min)</i></b>             | 代表 Loader 所有数据中的**最小开始时间**                                                     |
+| <b><i>end(max)</i></b>               | 代表该 Loader 所有数据中的**最大结束时间**                                                   |
+| <b><i>isPitch</i></b>                | 代表 Loader 本次执行是否为 [pitch](https://webpack.js.org/api/loaders/#pitching-loader) 函数 |
+| <b><i>filepath</i></b>               | 代表 Loader 所接收的**文件路径**                                                             |
+| <b><i>start</i></b>                  | 代表 Loader 本次执行的**开始时间**                                                           |
+| <b><i>end</i></b>                    | 代表 Loader 本次执行的**结束时间**                                                           |
+
+## 使用说明
+
+在 **Loader 时序图** 中，图表内的**左侧 Y 轴**代表了 **Loader 名称**，**顶部 X 轴**则对应了**时间 (时:分:秒)**，我们可以通过图表内的缩放，以及鼠标悬浮去查看更详细的 Loader 调用信息。
+
+页面顶部有两个筛选框，可以输入想要筛选的 **Loaders** 或 **Files**，时序图就是根据筛选的内容进行展示。
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/compile/loader-timeline-overall.png"
+  width="700"
+  style={{ margin: 'auto' }}
+/>
+
+### 查看 Loader 总信息
+
+我们如果想要查看单个 Loader 所有数据的**调用信息汇总**，可以通过**鼠标悬浮**到如下图所示的位置：
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/compile/loader-timeline-loader-timeline.png"
+  width="700"
+  style={{ margin: 'auto' }}
+/>
+
+此时，我们就可以看到单个 Loader 内的所有调用信息汇总（字段释义详见[名词释义](#名词释义)），如下图所示：
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/compile/loader-timeline-loader-card.png"
+  width="700"
+  style={{ margin: 'auto' }}
+/>
+
+### 查看单个 Loader 调用信息
+
+我们如果想要查看单个 Loader 的**单次调用信息**，可以通过**鼠标悬浮**到如下图所示位置内的**任意一个色彩条纹**上，此时，我们就可以看到单个 Loader 内的**本次调用信息**（字段释义详见[名词释义](#名词释义)），如下图所示：
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/compile/loader-timeline-loader-file.png"
+  width="700"
+  style={{ margin: 'auto' }}
+/>

package/docs/zh/guide/usage/module-analysis.mdx

@@ -0,0 +1,59 @@
+# Module 引用链分析
+
+## 功能介绍
+
+**Rsdoctor** 提供了 `Module 引用链分析` 模块，该模块主要是分析某个 Module 的依赖树，即被那些模块所依赖，即 [Webpack 的 stats.reasons](https://webpack.js.org/configuration/stats/#statsreasons)。
+
+在该模块中，可以分析 `Module` 引用链，如果有拆包诉求或者想要看某个 `Module` 为何被引入，可以通过 `Module 引用链分析` 快速清晰的定位引用链。
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/module-analysis-tree.png"
+  width="600px"
+  style={{ margin: 'auto' }}
+/>
+
+### 入口
+
+`「Bundle Size」` 页面中点击某个 **Assets** 后右侧会显示 `「Module 树」`，**Module** 后面会有跟着如下红框内图标，点击即可查看该 **Module** 的引用链关系图。
+
+{' '}
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/module-analysis-entry.png"
+  height="300px"
+  width="440px"
+  style={{ margin: 'auto' }}
+/>
+
+### 名词解释
+
+- **`Reasons`** : 顾名思义是 `[原因]` 的意思，即某个 `Module` 存在的原因。Reasons 就是该 `Module` 被哪些 `Module` 们引入，而整个 `Reasons Tree` 就是这个 `Module` 的整个上游引用链，包括了直接父级和间接父级们。[即 Webpack 的 stats.reasons。](https://webpack.js.org/configuration/stats/#statsreasons)
+- **`Dependencies`** : 是该 `Module` 依赖了哪些 `Module`。
+
+## Reasons 依赖树
+
+### 使用介绍
+
+`Reasons Tree` 展示了该 `Module` 的被其他模块引入的依赖链，即被哪些 `Module` 直接或间接引入。在该依赖树中可以查看依赖链上 `Module` 的 `Bundled Size` ，还可以通过点击最右侧 `>` 箭头跳转到该 `Module`的 `Module 依赖链分析` 页面。
+
+- **依赖链树的父子关系**：父节点文件是被子节点文件所依赖，进而被打包到产物中的。同理，孙子节点文件是被子节点所依赖而打包到产物中的，依次类推。
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/module-analysis-jump-icon.png"
+  width="700px"
+  style={{ margin: 'auto' }}
+/>
+
+- `Usage` 标签会展示各种模块标签的作用。
+
+- `Concatenated`标签:
+
+  - `Concatenated` 标签标识该模块是被串联的子模块，`hover` 上去就可以看到被聚合到了哪个主模块中。这种聚合模块无法继续拆解打包后的代码，因此无法得知具体的 `Bundled Size`，只能得知整个串联模块的大小。
+  - 名词解释：串联模块是将多个模块在打包时提升或串联到一个闭包中。 `Concatenated Module` 的解释可以查看[名词解释](guide/usage/bundle-size#%E5%90%8D%E8%AF%8D%E8%A7%A3%E9%87%8A)。
+
+- `!` 标签，`hover` 上去可以展示模块详细路径.
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/module-analysis-icons.png"
+  width="600px"
+  style={{ margin: 'auto' }}
+/>

package/docs/zh/guide/usage/plugins-analysis.mdx

@@ -0,0 +1,43 @@
+# Plugin 分析
+
+## 功能概览
+
+我们在 **Rsdoctor** 内 `Compile Analysis` 的二级页面 `Plugins Analysis` 中，可以看到当前 Rspack 或 Webpack 项目中所有被插件使用过的 **Compiler Hooks** 以及 **Compilation Hooks** 的调用数据信息，其内容如下图所示：
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/compile/plugins-analysis-overall.png"
+  width={'600px'}
+  style={{ margin: 'auto' }}
+/>
+
+:::tip
+plugin 耗时中会计算 Rsdoctor 的内部插件耗时。
+:::
+
+## 名词释义
+
+页面中数据统计表格内的字段含义如下：
+
+| 名词                          | 描述说明                                                                               |
+| ----------------------------- | -------------------------------------------------------------------------------------- |
+| <b><i>Plugin Tap Name</i></b> | 代表 [.tap 调用时的 name 值](https://github.com/webpack/tapable#hookhookmap-interface) |
+| <b><i>Hook</i></b>            | 代表 **hook 名称**                                                                     |
+| <b><i>calls</i></b>           | 代表 **被调用的次数**                                                                  |
+| <b><i>duration(total)</i></b> | 代表 **所有调用次数的时间总和**                                                        |
+
+## 使用说明
+
+### View Builder Config
+
+如果我们需要查看项目的 Webpack 配置，则可以通过点击卡片右上角的 `View Builder Config`，页面会弹出一个浮层，其中包含被序列化后的 **Builder Config**，如下图所示：
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/compile/plugins-analysis-config.png"
+  width={'400px'}
+  style={{ margin: 'auto' }}
+/>
+
+## 参考文档
+
+- [**Rspack Hooks**](https://www.rspack.dev/api/plugin-api.html#beforecompile)
+- [**Webpack Hooks**](https://webpack.js.org/api/compilation-hooks/)

package/docs/zh/guide/usage/project-overall.mdx

@@ -0,0 +1,51 @@
+# 项目概览
+
+## 功能概览
+
+我们在启动 **Rsdoctor** 的主界面中，会看到名为 `Project Overall` 的一个卡片，可以通过它了解到当前项目**配置、版本、规则预警**的信息，其内容如下图所示：
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/project-overall-1.jpg"
+  width="400px"
+  height="600px"
+  style={{ margin: 'auto' }}
+/>
+
+## 名词释义
+
+| 名词                  | 描述说明                                                                                                                |
+| --------------------- | ----------------------------------------------------------------------------------------------------------------------- |
+| <b><i>errors</i></b>  | 代表 Rsdoctor 在当次运行中检测出的 **error** 级别的规则                                                                 |
+| <b><i>warns</i></b>   | 代表 Rsdoctor 在当次运行中检测出的 **warn** 级别的规则                                                                  |
+| <b><i>webpack</i></b> | 代表当次运行时获取到的 Webpack 版本                                                                                     |
+| <b><i>cwd</i></b>     | 代表当次运行时的进程执行目录，即 [process.cwd()](https://nodejs.org/dist/latest-v18.x/docs/api/process.html#processcwd) |
+| <b><i>cpu</i></b>     | 代表 cpu 信息                                                                                                           |
+| <b><i>memory</i></b>  | 代表当次运行时的 memory 信息                                                                                            |
+| <b><i>node</i></b>    | 代表 [Node.js](https://nodejs.org/) 版本号                                                                              |
+| <b><i>yarn</i></b>    | 代表 [Yarn](https://yarnpkg.com/) 版本号，如果没有找到则显示为 `Not Found`                                              |
+| <b><i>npm</i></b>     | 代表 [npm](https://www.npmjs.com/) 版本号                                                                               |
+| <b><i>pnpm</i></b>    | 代表 [pnpm](https://pnpm.io/) 版本号，如果没有找到则显示为 `Not Found`                                                  |
+
+## 使用说明
+
+### View Builder Config
+
+如果我们需要查看项目的 Webpack 配置，则可以通过点击卡片右上角的 `View Builder Config`，页面会弹出一个浮层，其中包含被序列化后的 [Webpack Config](https://webpack.js.org/configuration/)，如下图所示：
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/project-overall-config.jpg"
+  width="500px"
+  style={{ margin: 'auto' }}
+/>
+
+### errors / warns
+
+卡片中的 `errors` 与 `warns` 如果显示的数字大于 0，则可以点击来查看对应的详情列表，下图以 `warns` 为例：
+
+<img
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/overall/project-overall-warning.jpg"
+  width="500px"
+  style={{ margin: 'auto' }}
+/>
+
+我们可以看到当前 Rsdoctor 检测出来的 `warn` 级别预警列表。

package/docs/zh/guide/usage/resolver.mdx

@@ -0,0 +1,29 @@
+# Resolver 分析
+
+:::tip
+
+- Rspack 项目中暂未支持 Resolve 分析能力。
+
+- Resolver 分析能力默认关闭，如需开启，可以在 `features` 数组中添加 `resolver`，如下示例。[features 配置](../../config/options/options)。
+
+```js
+  new rsdoctorWebpackPlugin({
+    features: ["xxx", "xxx", "resolver"]
+  }),
+```
+
+:::
+
+我们在 **Rsdoctor** 内 `Module Resolve` 中，可以看到当前 Webpack 项目中的所有源文件，通过**点击某个文件**可以查看该文件中引入的**模块路径**、**解析前后的路径对比**、**解析耗时**等信息，其内容如下图所示：
+
+<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/compile/resolver.png" />
+
+## 名词释义
+
+页面中数据统计表格内的字段含义如下：
+
+| 名词                         | 描述说明                                  |
+| ---------------------------- | ----------------------------------------- |
+| <b><i>Source Code</i></b>    | 代表**导入模块语句的源码**                |
+| <b><i>Duration</i></b>       | 代表解析路径的**耗时**                    |
+| <b><i>Resolve Result</i></b> | 代表 `Source Code` 被解析后的**最终路径** |