@rsdoctor/docs 1.1.2 → 1.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/en/blog/release/release-note-0_1.mdx +12 -12
- package/docs/en/blog/release/release-note-0_3.mdx +3 -3
- package/docs/en/blog/release/release-note-0_4.mdx +5 -5
- package/docs/en/blog/release/release-note-1_0.mdx +12 -12
- package/docs/en/blog/topic/duplicate-pkg-problem.mdx +2 -2
- package/docs/en/blog/topic/loader-optimization.mdx +4 -4
- package/docs/en/config/options/options.mdx +3 -3
- package/docs/en/guide/more/faq.mdx +4 -4
- package/docs/en/guide/rules/rule-custom.mdx +6 -6
- package/docs/en/guide/rules/rules.mdx +5 -5
- package/docs/en/guide/start/cli.mdx +2 -2
- package/docs/en/guide/start/intro.mdx +13 -13
- package/docs/en/guide/start/quick-start-shared.mdx +3 -3
- package/docs/en/guide/usage/bundle-alerts.mdx +1 -1
- package/docs/en/guide/usage/bundle-diff.mdx +9 -9
- package/docs/en/guide/usage/bundle-overall.mdx +3 -3
- package/docs/en/guide/usage/bundle-size.mdx +12 -12
- package/docs/en/guide/usage/compile-alerts.mdx +1 -1
- package/docs/en/guide/usage/compile-overall.mdx +7 -7
- package/docs/en/guide/usage/loaders-analysis.mdx +4 -4
- package/docs/en/guide/usage/loaders-timeline.mdx +5 -5
- package/docs/en/guide/usage/module-analysis.mdx +4 -4
- package/docs/en/guide/usage/plugins-analysis.mdx +3 -3
- package/docs/en/guide/usage/project-overall.mdx +3 -3
- package/docs/en/guide/usage/resolver.mdx +1 -1
- package/docs/en/guide/usage/rule-config.mdx +2 -2
- package/docs/public/netlify.toml +7 -0
- package/docs/zh/blog/release/release-note-0_1.mdx +10 -10
- package/docs/zh/blog/release/release-note-0_3.mdx +3 -3
- package/docs/zh/blog/release/release-note-0_4.mdx +5 -5
- package/docs/zh/blog/release/release-note-1_0.mdx +12 -12
- package/docs/zh/blog/topic/duplicate-pkg-problem.mdx +3 -3
- package/docs/zh/blog/topic/loader-optimization.mdx +4 -4
- package/docs/zh/config/options/options.mdx +3 -3
- package/docs/zh/guide/more/faq.mdx +4 -4
- package/docs/zh/guide/rules/rule-custom.mdx +6 -6
- package/docs/zh/guide/rules/rules.mdx +5 -5
- package/docs/zh/guide/start/cli.mdx +2 -2
- package/docs/zh/guide/start/intro.mdx +13 -13
- package/docs/zh/guide/start/quick-start-shared.mdx +3 -3
- package/docs/zh/guide/usage/bundle-alerts.mdx +1 -1
- package/docs/zh/guide/usage/bundle-diff.mdx +9 -9
- package/docs/zh/guide/usage/bundle-overall.mdx +3 -3
- package/docs/zh/guide/usage/bundle-size.mdx +11 -11
- package/docs/zh/guide/usage/compile-alerts.mdx +1 -1
- package/docs/zh/guide/usage/compile-overall.mdx +7 -7
- package/docs/zh/guide/usage/loaders-analysis.mdx +4 -4
- package/docs/zh/guide/usage/loaders-timeline.mdx +5 -5
- package/docs/zh/guide/usage/module-analysis.mdx +4 -4
- package/docs/zh/guide/usage/plugins-analysis.mdx +3 -3
- package/docs/zh/guide/usage/project-overall.mdx +3 -3
- package/docs/zh/guide/usage/resolver.mdx +1 -1
- package/docs/zh/guide/usage/rule-config.mdx +2 -2
- package/package.json +9 -8
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
- **产物分析(`Bundle Analysis`)模块**:分析构建产物资源(**Assets**)以及所包含的 **Modules** 的大小和代码信息。在该模块中,可以查看 Assets 中 **Module 打包后的实际代码大小**,以及模块的原始代码或**打包后的代码段**以及**模块引用关系**。
|
|
9
9
|
|
|
10
10
|
<img
|
|
11
|
-
src="https://assets.rspack.
|
|
11
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/bundle-size-overall.png"
|
|
12
12
|
width={'700px'}
|
|
13
13
|
style={{ margin: 'auto' }}
|
|
14
14
|
/>
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
### 名词解释
|
|
19
19
|
|
|
20
20
|
- **`Assets`**:资源是对图像、字体、媒体和其他文件类型的统称,是最终存在于输出文件夹内的文件,同时,每个 Chunk 都有对应的 [Assets 资源](https://webpack.js.org/concepts/under-the-hood/#chunks)。
|
|
21
|
-
- **`Module`**:一个或多个 Module 组合成了 Chunk。有关 Module 类型的详细信息,请参阅 [Rspack Modules](https://www.rspack.
|
|
21
|
+
- **`Module`**:一个或多个 Module 组合成了 Chunk。有关 Module 类型的详细信息,请参阅 [Rspack Modules](https://www.rspack.rs/api/modules.html) 和 [Webpack Modules](https://webpack.js.org/concepts/modules/#what-is-a-webpack-module)。
|
|
22
22
|
- **`Bundle Size`**:资源产物的最终打包大小,这是打包工具处理后的最终大小。
|
|
23
23
|
- **`Module Bundled Source & Size`**:**Module Parsed Source** 是指 **Module** 在打包产物中的最终代码片段,**Module Parsed Size** 是指 **Module** 在打包产物中的最终代码片段的大小。
|
|
24
24
|
- **`Package Count`**:第三方包的数量。
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
产物概览显示了 `Total Files` 等文件数目和大小信息。点击卡片图表可以展开资源详情,如下图所示:
|
|
35
35
|
|
|
36
36
|
<img
|
|
37
|
-
src="https://assets.rspack.
|
|
37
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/bundle-size-overall-1.png"
|
|
38
38
|
width={'700px'}
|
|
39
39
|
style={{ margin: 'auto' }}
|
|
40
40
|
/>
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
- 点击详情小图标,右侧会展示对应资源树,标明资源大小:
|
|
43
43
|
|
|
44
44
|
<img
|
|
45
|
-
src="https://assets.rspack.
|
|
45
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/bundle-size-tree.png"
|
|
46
46
|
width={'300px'}
|
|
47
47
|
height={'400px'}
|
|
48
48
|
style={{ margin: 'auto' }}
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
- 左侧是 **Assets** 资源列表,按照资源大小降序排列,可以点击 **「expand all」** 按钮展开全部节点。
|
|
70
70
|
- 右侧是 **Assets** 对应的 **Modules** 列表,同样按照打包后模块大小降序排列。
|
|
71
71
|
|
|
72
|
-
<img src="https://assets.rspack.
|
|
72
|
+
<img src="https://assets.rspack.rs/others/assets/rsdoctor/bundle-size-analysis-tree.png" />
|
|
73
73
|
|
|
74
74
|
### 搜索筛选框
|
|
75
75
|
|
|
@@ -80,7 +80,7 @@
|
|
|
80
80
|
- **Assets Size 筛选工具**:填写数字,单位为:KB、MB,可以过滤掉小于所填 `Size` 的 `Assets` 资源。
|
|
81
81
|
- **Module Size 筛选工具**:填写数字,单位为:KB、MB,可以过滤掉小于所填 `Size` 的 `Module` 资源。
|
|
82
82
|
|
|
83
|
-
<img src="https://assets.rspack.
|
|
83
|
+
<img src="https://assets.rspack.rs/others/assets/rsdoctor/bundle-size-analysis-selects.png" />
|
|
84
84
|
|
|
85
85
|
#### 模块搜索功能
|
|
86
86
|
|
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
|
|
89
89
|
如下图,可以看到匹配搜素 Module 关键字的结果:
|
|
90
90
|
|
|
91
|
-
<img src="https://assets.rspack.
|
|
91
|
+
<img src="https://assets.rspack.rs/others/assets/rsdoctor/search-modules.png" />
|
|
92
92
|
|
|
93
93
|
### 模块标签说明
|
|
94
94
|
|
|
@@ -96,13 +96,13 @@
|
|
|
96
96
|
|
|
97
97
|
<div style={{ display: 'flex' }}>
|
|
98
98
|
<img
|
|
99
|
-
src="https://assets.rspack.
|
|
99
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/bundle-size-assets-tags.png"
|
|
100
100
|
height="200px"
|
|
101
101
|
width="260px"
|
|
102
102
|
style={{ margin: 'auto' }}
|
|
103
103
|
/>
|
|
104
104
|
<img
|
|
105
|
-
src="https://assets.rspack.
|
|
105
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/bundle-size-modules-tags.png"
|
|
106
106
|
height="300px"
|
|
107
107
|
width="340px"
|
|
108
108
|
style={{ margin: 'auto' }}
|
|
@@ -124,7 +124,7 @@
|
|
|
124
124
|
点击 **「Bundle Size」** 页面的 **「Bundle Analyzer Graph」** 按钮,可以查看经典的瓦片图。
|
|
125
125
|
|
|
126
126
|
<img
|
|
127
|
-
src="https://assets.rspack.
|
|
127
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/bundle-size-tile-graph.png"
|
|
128
128
|
width="500px"
|
|
129
129
|
style={{ margin: 'auto' }}
|
|
130
130
|
/>
|
|
@@ -135,7 +135,7 @@
|
|
|
135
135
|
`supports.banner` 选项仅用于调试,请勿将其用于生产。
|
|
136
136
|
:::
|
|
137
137
|
|
|
138
|
-
由于 Rspack 和 webpack 都支持 [BannerPlugin](https://www.rspack.
|
|
138
|
+
由于 Rspack 和 webpack 都支持 [BannerPlugin](https://www.rspack.rs/plugins/webpack/banner-plugin#bannerplugin),BannerPlugin 是可在生成的 chunk 顶部或尾部添加一段指定的内容的内置插件。
|
|
139
139
|
|
|
140
140
|
添加的代码段将会影响到对 Bundle 的解析能力。
|
|
141
141
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
我们还集成了一些基于编译数据做检测的能力,如果本次编译结果中,存在命中了我们定义的[规则](../more/rules)的数据,则会在 **Rsdoctor** 主界面下方出现 `Compile Alerts` 模块,参考下图所示:
|
|
4
4
|
|
|
5
|
-
<img src="https://assets.rspack.
|
|
5
|
+
<img src="https://assets.rspack.rs/others/assets/rsdoctor/compile-alerts.png" />
|
|
6
6
|
|
|
7
7
|
通过该模块可以比较直观的看到我们项目在编译方面的一些预警信息,有助于我们可以更进一步优化项目的编译性能。
|
|
8
8
|
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
我们在启动 **Rsdoctor** 的首页中,会看到名为 `Compile Overall` 的一个卡片,可以通过它了解到当前项目**编译过程**的数据信息,其内容如下图所示:
|
|
6
6
|
|
|
7
7
|
<img
|
|
8
|
-
src="https://assets.rspack.
|
|
8
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/compile-overall-1.jpg"
|
|
9
9
|
width="400px"
|
|
10
10
|
height="600px"
|
|
11
11
|
style={{ margin: 'auto' }}
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
通过**点击 `Bootstrap -> BeforeCompile` 阶段后的数据**会在页面中弹出一个浮层,其内容如下图所示:
|
|
34
34
|
|
|
35
35
|
<img
|
|
36
|
-
src="https://assets.rspack.
|
|
36
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/compile-overall-boostrap.jpg"
|
|
37
37
|
width="600px"
|
|
38
38
|
style={{ margin: 'auto' }}
|
|
39
39
|
/>
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
通过**点击 `AfterCompile -> Done` 阶段后的数据**会在页面中弹出一个浮层,其内容如下图所示:
|
|
62
62
|
|
|
63
63
|
<img
|
|
64
|
-
src="https://assets.rspack.
|
|
64
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/compile-overall-aftercompile-1.jpg"
|
|
65
65
|
width="600px"
|
|
66
66
|
height="400px"
|
|
67
67
|
style={{ margin: 'auto' }}
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
再通过**向下滚动页面**,我们可以看到对应的图表:
|
|
78
78
|
|
|
79
79
|
<img
|
|
80
|
-
src="https://assets.rspack.
|
|
80
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/compile-overall-aftercompile-2.jpg"
|
|
81
81
|
width="600px"
|
|
82
82
|
style={{ margin: 'auto' }}
|
|
83
83
|
/>
|
|
@@ -104,12 +104,12 @@ Rspack 项目中暂时获取不到 Minify 耗时详情。
|
|
|
104
104
|
|
|
105
105
|
通过**点击 `Minify` 阶段后的数据**会在页面中弹出一个浮层,其内容如下图所示:
|
|
106
106
|
|
|
107
|
-
| <img src="https://assets.rspack.
|
|
108
|
-
|
|
|
107
|
+
| <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" /> |
|
|
108
|
+
| ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ |
|
|
109
109
|
|
|
110
110
|
整个浮层中的数据含义与前面的段落内容基本一致,此处不再重复介绍。
|
|
111
111
|
|
|
112
112
|
## 参考文档
|
|
113
113
|
|
|
114
|
-
- [**Rspack Hooks**](https://www.rspack.
|
|
114
|
+
- [**Rspack Hooks**](https://www.rspack.rs/api/plugin-api.html#beforecompile)
|
|
115
115
|
- [**Webpack Hooks**](https://webpack.js.org/api/compilation-hooks/)
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
首先,我们在该模块可以直接看到所有被 Loader 所处理过的文件树结构,如下图所示:
|
|
10
10
|
|
|
11
11
|
<img
|
|
12
|
-
src="https://assets.rspack.
|
|
12
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/loader-analysis-all.png"
|
|
13
13
|
width="600px"
|
|
14
14
|
style={{ margin: 'auto' }}
|
|
15
15
|
/>
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
通过 **点击选中目录** 可以在 文件树 的右侧,看到当前**选中目录下所有 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 ***"` 的卡片内容如下图所示:
|
|
30
30
|
|
|
31
31
|
<img
|
|
32
|
-
src="https://assets.rspack.
|
|
32
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/loader-analysis-table.png"
|
|
33
33
|
width="300px"
|
|
34
34
|
height="400px"
|
|
35
35
|
style={{ margin: 'auto' }}
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
- 「**模块右侧**」:当前选中的 Loader **调用时**的**输入输出**和**参数数据信息**。
|
|
54
54
|
|
|
55
55
|
<img
|
|
56
|
-
src="https://assets.rspack.
|
|
56
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/loader-analysis-code-change.png"
|
|
57
57
|
width="600px"
|
|
58
58
|
style={{ margin: 'auto' }}
|
|
59
59
|
/>
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
- **参数数据信息**:点击「**show more**」或者左上角展开按钮,可查看对应参数信息。
|
|
62
62
|
|
|
63
63
|
<img
|
|
64
|
-
src="https://assets.rspack.
|
|
64
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/loader-analysis-options.png"
|
|
65
65
|
width="600px"
|
|
66
66
|
style={{ margin: 'auto' }}
|
|
67
67
|
/>
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
我们在 **Rsdoctor** 的导航栏上点击 「Compile Analysis」-> 「Loader Analysis」选项的二级菜单 「Loaders Timeline」,可以看到当前项目中所有 Loader 的**执行时序图**,当然这个页面需要开启 `loader` 分析能力才会展示 [features](/config/options/options),其内容如下图所示:
|
|
6
6
|
|
|
7
7
|
<img
|
|
8
|
-
src="https://assets.rspack.
|
|
8
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/loader-timeline-overall.png"
|
|
9
9
|
width="700"
|
|
10
10
|
style={{ margin: 'auto' }}
|
|
11
11
|
/>
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
页面顶部有两个筛选框,可以输入想要筛选的 **Loaders** 或 **Files**,时序图就是根据筛选的内容进行展示。
|
|
35
35
|
|
|
36
36
|
<img
|
|
37
|
-
src="https://assets.rspack.
|
|
37
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/loader-timeline-overall.png"
|
|
38
38
|
width="700"
|
|
39
39
|
style={{ margin: 'auto' }}
|
|
40
40
|
/>
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
我们如果想要查看单个 Loader 所有数据的**调用信息汇总**,可以通过**鼠标悬浮**到如下图所示的位置:
|
|
45
45
|
|
|
46
46
|
<img
|
|
47
|
-
src="https://assets.rspack.
|
|
47
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/loader-timeline-loader-timeline.png"
|
|
48
48
|
width="700"
|
|
49
49
|
style={{ margin: 'auto' }}
|
|
50
50
|
/>
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
此时,我们就可以看到单个 Loader 内的所有调用信息汇总(字段释义详见[名词释义](#名词释义)),如下图所示:
|
|
53
53
|
|
|
54
54
|
<img
|
|
55
|
-
src="https://assets.rspack.
|
|
55
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/loader-timeline-loader-card.png"
|
|
56
56
|
width="700"
|
|
57
57
|
style={{ margin: 'auto' }}
|
|
58
58
|
/>
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
我们如果想要查看单个 Loader 的**单次调用信息**,可以通过**鼠标悬浮**到如下图所示位置内的**任意一个色彩条纹**上,此时,我们就可以看到单个 Loader 内的**本次调用信息**(字段释义详见[名词释义](#名词释义)),如下图所示:
|
|
63
63
|
|
|
64
64
|
<img
|
|
65
|
-
src="https://assets.rspack.
|
|
65
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/loader-timeline-loader-file.png"
|
|
66
66
|
width="700"
|
|
67
67
|
style={{ margin: 'auto' }}
|
|
68
68
|
/>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
在该模块中,可以分析 `Module` 引用链,如果有拆包诉求或者想要看某个 `Module` 为何被引入,可以通过 `Module 引用链分析` 快速清晰的定位引用链。
|
|
8
8
|
|
|
9
9
|
<img
|
|
10
|
-
src="https://assets.rspack.
|
|
10
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/module-analysis-tree.png"
|
|
11
11
|
width="600px"
|
|
12
12
|
style={{ margin: 'auto' }}
|
|
13
13
|
/>
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
{' '}
|
|
20
20
|
|
|
21
21
|
<img
|
|
22
|
-
src="https://assets.rspack.
|
|
22
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/module-analysis-entry.png"
|
|
23
23
|
height="300px"
|
|
24
24
|
width="440px"
|
|
25
25
|
style={{ margin: 'auto' }}
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
- **依赖链树的父子关系**:父节点文件是被子节点文件所依赖,进而被打包到产物中的。同理,孙子节点文件是被子节点所依赖而打包到产物中的,依次类推。
|
|
40
40
|
|
|
41
41
|
<img
|
|
42
|
-
src="https://assets.rspack.
|
|
42
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/module-analysis-jump-icon.png"
|
|
43
43
|
width="700px"
|
|
44
44
|
style={{ margin: 'auto' }}
|
|
45
45
|
/>
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
- `!` 标签,`hover` 上去可以展示模块详细路径.
|
|
55
55
|
|
|
56
56
|
<img
|
|
57
|
-
src="https://assets.rspack.
|
|
57
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/module-analysis-icons.png"
|
|
58
58
|
width="600px"
|
|
59
59
|
style={{ margin: 'auto' }}
|
|
60
60
|
/>
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
我们在 **Rsdoctor** 内 `Compile Analysis` 的二级页面 `Plugins Analysis` 中,可以看到当前 Rspack 或 webpack 项目中所有被插件使用过的 **Compiler Hooks** 以及 **Compilation Hooks** 的调用数据信息,其内容如下图所示:
|
|
6
6
|
|
|
7
7
|
<img
|
|
8
|
-
src="https://assets.rspack.
|
|
8
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/plugins-analysis-overall.png"
|
|
9
9
|
width={'600px'}
|
|
10
10
|
style={{ margin: 'auto' }}
|
|
11
11
|
/>
|
|
@@ -32,12 +32,12 @@ plugin 耗时中会计算 Rsdoctor 的内部插件耗时。
|
|
|
32
32
|
如果我们需要查看项目的 Rspack 或 webpack 配置,则可以通过点击卡片右上角的 `View Bundler Config`,页面会弹出一个浮层,其中包含被序列化后的 **Bundler Config**,如下图所示:
|
|
33
33
|
|
|
34
34
|
<img
|
|
35
|
-
src="https://assets.rspack.
|
|
35
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/plugins-analysis-config.png"
|
|
36
36
|
width={'400px'}
|
|
37
37
|
style={{ margin: 'auto' }}
|
|
38
38
|
/>
|
|
39
39
|
|
|
40
40
|
## 参考文档
|
|
41
41
|
|
|
42
|
-
- [**Rspack Hooks**](https://www.rspack.
|
|
42
|
+
- [**Rspack Hooks**](https://www.rspack.rs/api/plugin-api.html#beforecompile)
|
|
43
43
|
- [**Webpack Hooks**](https://webpack.js.org/api/compilation-hooks/)
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
我们在启动 **Rsdoctor** 的主界面中,会看到名为 `Project Overall` 的一个卡片,可以通过它了解到当前项目**配置、版本、规则预警**的信息,其内容如下图所示:
|
|
6
6
|
|
|
7
7
|
<img
|
|
8
|
-
src="https://assets.rspack.
|
|
8
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/project-overall-1.jpg"
|
|
9
9
|
style={{ margin: 'auto' }}
|
|
10
10
|
/>
|
|
11
11
|
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
如果我们需要查看项目的 Rspack 或 webpack 配置,则可以通过点击卡片右上角的 `View Bundler Config`,页面会弹出一个浮层,其中包含被序列化后的 [Bundler Config](https://webpack.js.org/configuration/),如下图所示:
|
|
32
32
|
|
|
33
33
|
<img
|
|
34
|
-
src="https://assets.rspack.
|
|
34
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/project-overall-config.jpg"
|
|
35
35
|
width="500px"
|
|
36
36
|
style={{ margin: 'auto' }}
|
|
37
37
|
/>
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
卡片中的 `errors` 与 `warns` 如果显示的数字大于 0,则可以点击来查看对应的详情列表,下图以 `warns` 为例:
|
|
42
42
|
|
|
43
43
|
<img
|
|
44
|
-
src="https://assets.rspack.
|
|
44
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/bundle-alerts.png"
|
|
45
45
|
width="500px"
|
|
46
46
|
style={{ margin: 'auto' }}
|
|
47
47
|
/>
|
|
@@ -19,7 +19,7 @@ new rsdoctorRspackPlugin({
|
|
|
19
19
|
|
|
20
20
|
我们在 **Rsdoctor** 内 `Module Resolve` 中,可以看到当前 Rspack 项目中的所有源文件,通过**点击某个文件**可以查看该文件中引入的**模块路径**、**解析前后的路径对比**、**解析耗时**等信息,其内容如下图所示:
|
|
21
21
|
|
|
22
|
-
<img src="https://assets.rspack.
|
|
22
|
+
<img src="https://assets.rspack.rs/others/assets/rsdoctor/resolver.png" />
|
|
23
23
|
|
|
24
24
|
## 名词释义
|
|
25
25
|
|
|
@@ -7,13 +7,13 @@
|
|
|
7
7
|
<img
|
|
8
8
|
width="700"
|
|
9
9
|
style={{ margin: '10px auto' }}
|
|
10
|
-
src="https://assets.rspack.
|
|
10
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/rule-config-cli.png"
|
|
11
11
|
/>
|
|
12
12
|
|
|
13
13
|
<img
|
|
14
14
|
width="700"
|
|
15
15
|
style={{ margin: '10px auto' }}
|
|
16
|
-
src="https://assets.rspack.
|
|
16
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/bundle-alerts.png"
|
|
17
17
|
/>
|
|
18
18
|
|
|
19
19
|
## 如何使用
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rsdoctor/docs",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.3",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "https://github.com/web-infra-dev/rsdoctor",
|
|
@@ -19,24 +19,25 @@
|
|
|
19
19
|
"registry": "https://registry.npmjs.org/"
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
|
-
"@rspress/plugin-rss": "2.0.0-beta.
|
|
23
|
-
"@rspress/plugin-llms": "2.0.0-beta.
|
|
22
|
+
"@rspress/plugin-rss": "2.0.0-beta.6",
|
|
23
|
+
"@rspress/plugin-llms": "2.0.0-beta.7",
|
|
24
|
+
"@rspress/plugin-algolia": "2.0.0-beta.7",
|
|
24
25
|
"@types/node": "^22.8.1",
|
|
25
|
-
"@types/react": "^18.3.
|
|
26
|
+
"@types/react": "^18.3.22",
|
|
26
27
|
"@types/react-dom": "^18.3.7",
|
|
27
28
|
"react": "18.3.1",
|
|
28
29
|
"react-dom": "18.3.1",
|
|
29
30
|
"rsbuild-plugin-google-analytics": "^1.0.3",
|
|
30
31
|
"rsbuild-plugin-open-graph": "^1.0.2",
|
|
31
32
|
"rspress-plugin-font-open-sans": "^1.0.0",
|
|
32
|
-
"rspress-plugin-sitemap": "^1.1.
|
|
33
|
+
"rspress-plugin-sitemap": "^1.1.2",
|
|
33
34
|
"typescript": "^5.2.2",
|
|
34
|
-
"@rsdoctor/types": "1.1.
|
|
35
|
+
"@rsdoctor/types": "1.1.3"
|
|
35
36
|
},
|
|
36
37
|
"dependencies": {
|
|
37
|
-
"@rstack-dev/doc-ui": "1.
|
|
38
|
+
"@rstack-dev/doc-ui": "1.10.5",
|
|
38
39
|
"react-markdown": "^9.1.0",
|
|
39
|
-
"rspress": "2.0.0-beta.
|
|
40
|
+
"rspress": "2.0.0-beta.6"
|
|
40
41
|
},
|
|
41
42
|
"scripts": {
|
|
42
43
|
"dev": "rspress dev",
|