@rsdoctor/docs 1.0.0-beta.2 → 1.0.0-rc.0
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/README.md +1 -1
- package/docs/en/blog/release/release-note-0_1.mdx +8 -12
- package/docs/en/blog/release/release-note-0_3.mdx +2 -2
- package/docs/en/blog/release/release-note-0_4.mdx +4 -4
- package/docs/en/blog/topic/duplicate-pkg-problem.mdx +12 -13
- package/docs/en/blog/topic/loader-optimization.mdx +6 -6
- package/docs/en/config/options/options.mdx +53 -22
- package/docs/en/guide/more/faq.mdx +3 -3
- package/docs/en/guide/rules/rule-custom.mdx +3 -9
- package/docs/en/guide/rules/rules.mdx +22 -25
- package/docs/en/guide/start/cli.mdx +1 -1
- package/docs/en/guide/start/intro.mdx +16 -23
- package/docs/en/guide/start/quick-start-shared.mdx +2 -2
- package/docs/en/guide/start/quick-start.mdx +3 -3
- package/docs/en/guide/usage/bundle-alerts.mdx +2 -2
- 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 +33 -17
- package/docs/en/guide/usage/compile-alerts.mdx +2 -2
- package/docs/en/guide/usage/compile-overall.mdx +13 -13
- package/docs/en/guide/usage/loaders-analysis.mdx +6 -6
- 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 +2 -2
- package/docs/en/guide/usage/project-overall.mdx +4 -4
- package/docs/en/guide/usage/resolver.mdx +1 -1
- package/docs/en/guide/usage/rule-config.mdx +5 -5
- package/docs/zh/blog/release/release-note-0_1.mdx +8 -14
- package/docs/zh/blog/release/release-note-0_3.mdx +2 -2
- package/docs/zh/blog/release/release-note-0_4.mdx +4 -4
- package/docs/zh/blog/topic/duplicate-pkg-problem.mdx +10 -11
- package/docs/zh/blog/topic/loader-optimization.mdx +6 -6
- package/docs/zh/config/options/options.mdx +111 -82
- package/docs/zh/guide/more/faq.mdx +3 -3
- package/docs/zh/guide/rules/rule-custom.mdx +3 -9
- package/docs/zh/guide/rules/rules.mdx +11 -17
- package/docs/zh/guide/start/cli.mdx +1 -1
- package/docs/zh/guide/start/intro.mdx +9 -17
- package/docs/zh/guide/start/quick-start.mdx +2 -2
- 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 +25 -18
- package/docs/zh/guide/usage/compile-alerts.mdx +1 -1
- package/docs/zh/guide/usage/compile-overall.mdx +13 -13
- package/docs/zh/guide/usage/loaders-analysis.mdx +6 -6
- package/docs/zh/guide/usage/loaders-timeline.mdx +5 -5
- package/docs/zh/guide/usage/module-analysis.mdx +5 -4
- package/docs/zh/guide/usage/plugins-analysis.mdx +2 -2
- package/docs/zh/guide/usage/project-overall.mdx +4 -4
- package/docs/zh/guide/usage/resolver.mdx +1 -1
- package/docs/zh/guide/usage/rule-config.mdx +2 -2
- package/package.json +2 -2
- package/docs/public/bundle-alerts.png +0 -0
- package/docs/public/cross-chunks-package.png +0 -0
|
@@ -189,11 +189,7 @@ const CheckRule = defineRule<typeof ruleTitle, config>(() => ({
|
|
|
189
189
|
|
|
190
190
|
- 基本规则警示组件
|
|
191
191
|
|
|
192
|
-
<img src="https://
|
|
193
|
-
|
|
194
|
-
- 代码展示组件
|
|
195
|
-
|
|
196
|
-
<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/rule-2.jpeg" />
|
|
192
|
+
<img src="https://assets.rspack.dev/others/assets/rsdoctor/rule-1.jpeg" />
|
|
197
193
|
|
|
198
194
|
## 展示组件
|
|
199
195
|
|
|
@@ -260,7 +256,7 @@ report({
|
|
|
260
256
|
|
|
261
257
|
- 组件展示
|
|
262
258
|
|
|
263
|
-
<img src="https://
|
|
259
|
+
<img src="https://assets.rspack.dev/others/assets/rsdoctor/rule-1.jpeg" />
|
|
264
260
|
|
|
265
261
|
- 组件代码 [Code](https://github.com/web-infra-dev/rsdoctor/blob/main/packages/components/src/components/Alert/link.tsx)
|
|
266
262
|
|
|
@@ -332,9 +328,7 @@ report({
|
|
|
332
328
|
|
|
333
329
|
- 组件展示
|
|
334
330
|
|
|
335
|
-
<img src="https://
|
|
336
|
-
|
|
337
|
-
<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/rule-3.jpeg" />
|
|
331
|
+
<img src="https://assets.rspack.dev/others/assets/rsdoctor/rule-3.jpeg" />
|
|
338
332
|
|
|
339
333
|
- 组件代码 [Code](https://github.com/web-infra-dev/rsdoctor/blob/main/packages/components/src/components/Alert/view.tsx)
|
|
340
334
|
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
|
|
9
9
|
:::
|
|
10
10
|
|
|
11
|
-
### [E1001] Duplicate
|
|
11
|
+
### [E1001] Duplicate packages
|
|
12
12
|
|
|
13
13
|
#### 规则详情
|
|
14
14
|
|
|
@@ -16,32 +16,26 @@
|
|
|
16
16
|
|
|
17
17
|
<div style={{ display: 'flex' }}>
|
|
18
18
|
<img
|
|
19
|
-
src="https://
|
|
19
|
+
src="https://assets.rspack.dev/others/assets/rsdoctor/bundle-alerts-1.png"
|
|
20
20
|
height="200px"
|
|
21
|
-
width="
|
|
22
|
-
style={{ margin: 'auto' }}
|
|
23
|
-
/>
|
|
24
|
-
<img
|
|
25
|
-
src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundle-alters-2.png"
|
|
26
|
-
height="300px"
|
|
27
|
-
width="340px"
|
|
21
|
+
width="500px"
|
|
28
22
|
style={{ margin: 'auto' }}
|
|
29
23
|
/>
|
|
30
24
|
</div>
|
|
31
25
|
|
|
32
26
|
- 重复包预警卡片
|
|
33
27
|
|
|
34
|
-
<img src="https://
|
|
28
|
+
<img src="https://assets.rspack.dev/others/assets/rsdoctor/bundle-alerts.png" />
|
|
35
29
|
|
|
36
30
|
- 点击图标展开重复包详情，可以看到：重复包的包名、版本、大小、引用文件。
|
|
37
31
|
|
|
38
32
|
- 点击最右侧 **「Show Relations」** 可以查看具体这个第三方的引用链路和对应的引用文件代码位置。
|
|
39
33
|
|
|
40
|
-
<img src="https://
|
|
34
|
+
<img src="https://assets.rspack.dev/others/assets/rsdoctor/bundle-alters-relations.png" />
|
|
41
35
|
|
|
42
36
|
- 点击最右侧 **「!（叹号）」** 图标，可以查看重复第三方包的规则的具体解释。
|
|
43
37
|
|
|
44
|
-
<img src="https://
|
|
38
|
+
<img src="https://assets.rspack.dev/others/assets/rsdoctor/bundle-alters-rule.png" />
|
|
45
39
|
|
|
46
40
|
#### 配置
|
|
47
41
|
|
|
@@ -100,7 +94,7 @@ enum CheckVersion {
|
|
|
100
94
|
|
|
101
95
|
点击 「**More**」可以查看对应规则解释。
|
|
102
96
|
|
|
103
|
-
### [E1002] Cross
|
|
97
|
+
### [E1002] Cross chunks package
|
|
104
98
|
|
|
105
99
|
跨 Chunks 的重复包规则能够扫描**不同 `chunks` 中的重复包**。这些重复包也有可能导致打包代码冗余，具体还要看业务逻辑及冗余代码大小。
|
|
106
100
|
|
|
@@ -108,13 +102,13 @@ enum CheckVersion {
|
|
|
108
102
|
- Module 是指被重复打在多个 chunk 中的 Module。
|
|
109
103
|
- Chunks 则是被重复打包的产物。
|
|
110
104
|
|
|
111
|
-
<img src="/cross-chunks-package.png" />
|
|
105
|
+
<img src="https://assets.rspack.dev/others/assets/rsdoctor/cross-chunks-package.png" />
|
|
112
106
|
|
|
113
107
|
#### 解决方案
|
|
114
108
|
|
|
115
109
|
可查看 [[E1002] Cross Chunks Packages](../more/rules)
|
|
116
110
|
|
|
117
|
-
### [E1003] Loader
|
|
111
|
+
### [E1003] Loader performance optimization
|
|
118
112
|
|
|
119
113
|
通过该模块可以比较直观的看到我们项目在编译方面的一些预警信息，有助于我们可以更进一步优化项目的编译性能。
|
|
120
114
|
|
|
@@ -148,7 +142,7 @@ interface Config {
|
|
|
148
142
|
}
|
|
149
143
|
```
|
|
150
144
|
|
|
151
|
-
### [E1004] ECMA
|
|
145
|
+
### [E1004] ECMA version check
|
|
152
146
|
|
|
153
147
|
该规则用于检测不兼容的高级语法。在规则扫描时，优先使用 `browserslist` 的配置；如果未配置 `browserslist`，则需要手动进行检测，示例如下：
|
|
154
148
|
|
|
@@ -208,7 +202,7 @@ type CheckSyntaxOptions = {
|
|
|
208
202
|
|
|
209
203
|
更多 `ECMA Version Check` 配置请参考 [ECMA Version Check Options](https://github.com/rspack-contrib/rsbuild-plugin-check-syntax?tab=readme-ov-file#options)
|
|
210
204
|
|
|
211
|
-
### [E1005] Default
|
|
205
|
+
### [E1005] Default import check
|
|
212
206
|
|
|
213
207
|
通常，Rspack 会自动兼容不同类型的模块，但在某些情况下，兼容性操作可能会失败。例如，当使用 `Default Import` 导入一个 `cjs` 模块时，如果该模块没有兼容的语句（如 `exports.default`），则会出现问题。
|
|
214
208
|
|
|
@@ -96,7 +96,7 @@ import { execute } from '@rsdoctor/cli';
|
|
|
96
96
|
|
|
97
97
|
**execute()**
|
|
98
98
|
|
|
99
|
-
`execute` 异步函数是 Rsdoctor CLI 的执行函数，通过调用 `execute` 函数就会自动解析 [process.argv](https://nodejs.org/dist/latest-
|
|
99
|
+
`execute` 异步函数是 Rsdoctor CLI 的执行函数，通过调用 `execute` 函数就会自动解析 [process.argv](https://nodejs.org/dist/latest-v22.x/docs/api/process.html#processargv)，然后调用不同的命令。
|
|
100
100
|
|
|
101
101
|
**execute('analyze', \{...\})**
|
|
102
102
|
|
|
@@ -24,11 +24,11 @@
|
|
|
24
24
|
|
|
25
25
|
- 概览页（即首页）能够知道**项目配置、诊断信息、编译信息、产物情况**。
|
|
26
26
|
|
|
27
|
-
|
|
28
28
|
|
|
29
29
|
- 除了有项目概览之外，我们还提供了诊断模块，分别是编译诊断、重复包诊断等。如果你的编译、产物命中了我们定义的诊断规则，就会在工具首页出现对应的警示模块, **其中重复包可以查看到详细的引用路径**:
|
|
30
30
|
|
|
31
|
-
|
|
32
32
|
|
|
33
33
|
### ⭐️ 编译分析
|
|
34
34
|
|
|
@@ -38,18 +38,14 @@
|
|
|
38
38
|
|
|
39
39
|
- 该模块主要提供了 **Rspack 或 Webpack 的 Loaders** 内的输入输出、预估耗时、参数等数据分析的功能。
|
|
40
40
|
|
|
41
|
-
<div style={{ display: 'flex' }}>
|
|
42
41
|
<img
|
|
43
|
-
src="https://
|
|
44
|
-
width="55%"
|
|
42
|
+
src="https://assets.rspack.dev/others/assets/rsdoctor/loader-timeline-overall.png"
|
|
45
43
|
style={{ margin: 'auto' }}
|
|
46
44
|
/>
|
|
47
45
|
<img
|
|
48
|
-
src="https://
|
|
49
|
-
width="45%"
|
|
46
|
+
src="https://assets.rspack.dev/others/assets/rsdoctor/loader-analysis-all.png"
|
|
50
47
|
style={{ margin: 'auto' }}
|
|
51
48
|
/>
|
|
52
|
-
</div>
|
|
53
49
|
|
|
54
50
|
#### Plugin 分析
|
|
55
51
|
|
|
@@ -58,9 +54,7 @@
|
|
|
58
54
|
<p>
|
|
59
55
|
<img
|
|
60
56
|
alt="bundle"
|
|
61
|
-
src={
|
|
62
|
-
'https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/start/compile-plugin.jpg'
|
|
63
|
-
}
|
|
57
|
+
src={'https://assets.rspack.dev/others/assets/rsdoctor/compile-plugin.jpg'}
|
|
64
58
|
width="600px"
|
|
65
59
|
style={{ margin: 'auto' }}
|
|
66
60
|
/>
|
|
@@ -73,9 +67,7 @@
|
|
|
73
67
|
<p>
|
|
74
68
|
<img
|
|
75
69
|
alt="bundle"
|
|
76
|
-
src={
|
|
77
|
-
'https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/start/resolver.jpeg'
|
|
78
|
-
}
|
|
70
|
+
src={'https://assets.rspack.dev/others/assets/rsdoctor/resolver.png'}
|
|
79
71
|
width="700px"
|
|
80
72
|
style={{ margin: 'auto' }}
|
|
81
73
|
/>
|
|
@@ -91,7 +83,7 @@
|
|
|
91
83
|
<img
|
|
92
84
|
alt="bundle"
|
|
93
85
|
src={
|
|
94
|
-
'https://
|
|
86
|
+
'https://assets.rspack.dev/others/assets/rsdoctor/bundle-size-overall.png'
|
|
95
87
|
}
|
|
96
88
|
width="700px"
|
|
97
89
|
style={{ margin: 'auto' }}
|
|
@@ -106,8 +98,8 @@
|
|
|
106
98
|
|
|
107
99
|
使用 Rsdoctor 提供的 Bundle Diff 功能，可以看到产物内的资源体积、重复包、Packages 等数据的变化以及每个资源中的模块文件的大小及代码的变化。
|
|
108
100
|
|
|
109
|
-
|  |  |
|
|
102
|
+
| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------ |
|
|
111
103
|
|
|
112
104
|
## 🧑💻 社区
|
|
113
105
|
|
|
@@ -15,10 +15,10 @@ import { PackageManagerTabs } from '@theme';
|
|
|
15
15
|
### Webpack 项目
|
|
16
16
|
|
|
17
17
|
:::tip
|
|
18
|
-
|
|
18
|
+
Rsdoctor 仅支持 webpack >= 5。
|
|
19
19
|
:::
|
|
20
20
|
|
|
21
|
-
基于
|
|
21
|
+
基于 webpack 的项目，安装以下依赖：
|
|
22
22
|
|
|
23
23
|
<PackageManagerTabs command="add @rsdoctor/webpack-plugin -D" />
|
|
24
24
|
|
|
@@ -21,7 +21,7 @@ import { Badge } from '@theme';
|
|
|
21
21
|
|
|
22
22
|
我们计划提供了一个在线页面用于 Bundle Diff 分析，你可以通过在页面中上传 **2 份** Rsdoctor 产出的[manifest.json](/config/options/term#manifestjson)，其中一份作为基准（Baseline），另一份则作为当前产物结果 (Current)，通过点击 Start Diff 则就可以进入我们的分析页面。
|
|
23
23
|
|
|
24
|
-
<img src="https://
|
|
24
|
+
<img src="https://assets.rspack.dev/others/assets/rsdoctor/bundle-diff.png" />
|
|
25
25
|
|
|
26
26
|
## 使用指南
|
|
27
27
|
|
|
@@ -77,13 +77,13 @@ import { Badge } from '@theme';
|
|
|
77
77
|
- **Modules** 代表两次产物中存在的 Modules 数量。
|
|
78
78
|
- **Packages** 代表两次产物中存在的 NPM Packages 总数，以及新增、删除、变更的数量变化。
|
|
79
79
|
|
|
80
|
-
<img src="https://
|
|
80
|
+
<img src="https://assets.rspack.dev/others/assets/rsdoctor/bundle-diff-cards.png" />
|
|
81
81
|
|
|
82
82
|
#### Overview
|
|
83
83
|
|
|
84
84
|
在 Overview 模块中，我们可以看到不同**文件类型维度**的**体积**、**数量**以及**变化幅度**。
|
|
85
85
|
|
|
86
|
-
<img src="https://
|
|
86
|
+
<img src="https://assets.rspack.dev/others/assets/rsdoctor/bundle-diff-all.png" />
|
|
87
87
|
|
|
88
88
|
#### Assets
|
|
89
89
|
|
|
@@ -93,17 +93,17 @@ Rsdoctor 在展示 Asset 名称时，会尝试移除产物文件名中的 hash
|
|
|
93
93
|
|
|
94
94
|
在 Assets 模块中，我们可以看到产物文件之间的**体积**以及**变化幅度**。
|
|
95
95
|
|
|
96
|
-
<img src="https://
|
|
96
|
+
<img src="https://assets.rspack.dev/others/assets/rsdoctor/bundle-diff-assets-list.png" />
|
|
97
97
|
|
|
98
98
|
同时**点击**列表项目前的 **"+" 按钮**，则可以展开看到对应 Asset 所**包含的模块列表**（即 `Modules of "***"`），其中则会显示模块之间的**体积**以及**变化幅度**。
|
|
99
99
|
|
|
100
|
-
<img src="https://
|
|
100
|
+
<img src="https://assets.rspack.dev/others/assets/rsdoctor/bundle-diff-assets.png" />
|
|
101
101
|
|
|
102
102
|
Rsdoctor 会**兼容同名 Assets 文件 hash 不同**的情况，但是对于**拆包产生的命名不同的 Assets**，Rsdoctor 则无法辨别其比较对象。
|
|
103
103
|
|
|
104
104
|
所以 Rsdoctor Assets 模块**还提供了 select 组件**，你可以**手动选择想要对比的 Assets 资源**。
|
|
105
105
|
|
|
106
|
-
<img src="https://
|
|
106
|
+
<img src="https://assets.rspack.dev/others/assets/rsdoctor/bundle-diff-select-assets.png" />
|
|
107
107
|
|
|
108
108
|
#### Modules
|
|
109
109
|
|
|
@@ -113,7 +113,7 @@ Rsdoctor 会**兼容同名 Assets 文件 hash 不同**的情况，但是对于**
|
|
|
113
113
|
|
|
114
114
|
而 `node_modules` 标签则意味着该模块的路径中包含了 `/node_modules/`。
|
|
115
115
|
|
|
116
|
-
<img src="https://
|
|
116
|
+
<img src="https://assets.rspack.dev/others/assets/rsdoctor/bundle-diff-module-list.png" />
|
|
117
117
|
|
|
118
118
|
在列表项的右侧，则可以通过对应的「View Changes」按钮来查看模块代码的变更。
|
|
119
119
|
|
|
@@ -122,10 +122,10 @@ Rsdoctor 会**兼容同名 Assets 文件 hash 不同**的情况，但是对于**
|
|
|
122
122
|
- **Source Code: 源码数据。** `Normal` 模式下存在代码资源，`Lite` 模式下不存在代码资源，`Brief` 模式不存在代码资源。
|
|
123
123
|
- **Bundled Code: 构建后代码。** `Normal` 模式下存在代码资源，`Lite` 模式下存在代码资源，`Brief` 模式不存在代码资源。
|
|
124
124
|
|
|
125
|
-
<img src="https://
|
|
125
|
+
<img src="https://assets.rspack.dev/others/assets/rsdoctor/bundle-diff-module-changes.png" />
|
|
126
126
|
|
|
127
127
|
#### Packages
|
|
128
128
|
|
|
129
129
|
在 Packages 模块，我们可以看到两次产物中包含的**所有 NPM Packages 列表**，每个列表项则会包含其对应的 **Package Name**、**Version（版本号）**、**Parsed Size（打包后的最终体积）**。
|
|
130
130
|
|
|
131
|
-
<img src="https://
|
|
131
|
+
<img src="https://assets.rspack.dev/others/assets/rsdoctor/bundle-diff-packages.png" />
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
我们在启动 **Rsdoctor** 的首页中，会看到名为 `Bundle Overall` 的一个卡片，可以通过它了解到当前项目**构建产物**的信息，其内容如下图所示：
|
|
6
6
|
|
|
7
7
|
<img
|
|
8
|
-
src="https://
|
|
8
|
+
src="https://assets.rspack.dev/others/assets/rsdoctor/bundle-overall-1.png"
|
|
9
9
|
width="400px"
|
|
10
10
|
height="500px"
|
|
11
11
|
style={{ margin: 'auto' }}
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
- **Initial:** 是指该资源是入口的主 Chunk。
|
|
37
37
|
|
|
38
38
|
<img
|
|
39
|
-
src="https://
|
|
39
|
+
src="https://assets.rspack.dev/others/assets/rsdoctor/bundle-size-tree.png"
|
|
40
40
|
width="400px"
|
|
41
41
|
height="600px"
|
|
42
42
|
style={{ margin: 'auto' }}
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
如果卡片中的 `Duplicate Packages` 显示的数字大于 0，则可以**点击来查看对应的重复包详情列表**，其内容如下图所示：
|
|
48
48
|
|
|
49
49
|
<img
|
|
50
|
-
src="https://
|
|
50
|
+
src="https://assets.rspack.dev/others/assets/rsdoctor/bundle-overall-dup-pkg.png"
|
|
51
51
|
width="600px"
|
|
52
52
|
style={{ margin: 'auto' }}
|
|
53
53
|
/>
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
- **产物分析（`Bundle Analysis`）模块**：分析构建产物资源（**Assets**）以及所包含的 **Modules** 的大小和代码信息。在该模块中，可以查看 Assets 中 **Module 打包后的实际代码大小**，以及模块的原始代码或**打包后的代码段**以及**模块引用关系**。
|
|
9
9
|
|
|
10
10
|
<img
|
|
11
|
-
src="https://
|
|
11
|
+
src="https://assets.rspack.dev/others/assets/rsdoctor/bundle-size-overall.png"
|
|
12
12
|
width={'700px'}
|
|
13
13
|
style={{ margin: 'auto' }}
|
|
14
14
|
/>
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
|
|
20
20
|
- **`Assets`**：资源是对图像、字体、媒体和其他文件类型的统称，是最终存在于输出文件夹内的文件，同时，每个 Chunk 都有对应的 [Assets 资源](https://webpack.js.org/concepts/under-the-hood/#chunks)。
|
|
21
21
|
- **`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)。
|
|
22
|
-
- **`Bundle Size
|
|
22
|
+
- **`Bundle Size`**：资源产物的最终打包大小，这是打包工具处理后的最终大小。
|
|
23
23
|
- **`Module Bundled Source & Size`**：**Module Parsed Source** 是指 **Module** 在打包产物中的最终代码片段，**Module Parsed Size** 是指 **Module** 在打包产物中的最终代码片段的大小。
|
|
24
24
|
- **`Package Count`**：第三方包的数量。
|
|
25
25
|
- **`Initial Chunk`**: **initial(初始化)** 是入口起点的主 Chunk，该 chunk 包含入口起点指定的所有模块及其依赖项，与「**按需加载**」的 **Chunk** 资源不同。
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
产物概览显示了 `Total Files` 等文件数目和大小信息。点击卡片图表可以展开资源详情，如下图所示：
|
|
35
35
|
|
|
36
36
|
<img
|
|
37
|
-
src="https://
|
|
37
|
+
src="https://assets.rspack.dev/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://
|
|
45
|
+
src="https://assets.rspack.dev/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://
|
|
72
|
+
<img src="https://assets.rspack.dev/others/assets/rsdoctor/bundle-size-analysis-tree.png" />
|
|
73
73
|
|
|
74
74
|
### 搜索筛选框
|
|
75
75
|
|
|
@@ -80,7 +80,15 @@
|
|
|
80
80
|
- **Assets Size 筛选工具**：填写数字，单位为：KB、MB，可以过滤掉小于所填 `Size` 的 `Assets` 资源。
|
|
81
81
|
- **Module Size 筛选工具**：填写数字，单位为：KB、MB，可以过滤掉小于所填 `Size` 的 `Module` 资源。
|
|
82
82
|
|
|
83
|
-
<img src="https://
|
|
83
|
+
<img src="https://assets.rspack.dev/others/assets/rsdoctor/bundle-size-analysis-selects.png" />
|
|
84
|
+
|
|
85
|
+
#### 模块搜索功能
|
|
86
|
+
|
|
87
|
+
支持了模块搜索功能，用户可以通过点击「**Search Module**」按钮，打开模块搜索弹窗。输入模块名称来快速定位和查看模块所在的 Assets，从而更方便地分析模块的引用关系和大小。搜索 Module 位于哪些 Assets 中。
|
|
88
|
+
|
|
89
|
+
如下图，可以看到匹配搜素 Module 关键字的结果：
|
|
90
|
+
|
|
91
|
+
<img src="https://assets.rspack.dev/others/assets/rsdoctor/search-modules.png" />
|
|
84
92
|
|
|
85
93
|
### 模块标签说明
|
|
86
94
|
|
|
@@ -88,15 +96,15 @@
|
|
|
88
96
|
|
|
89
97
|
<div style={{ display: 'flex' }}>
|
|
90
98
|
<img
|
|
91
|
-
src="https://
|
|
99
|
+
src="https://assets.rspack.dev/others/assets/rsdoctor/bundle-size-assets-tags.png"
|
|
92
100
|
height="200px"
|
|
93
|
-
width="
|
|
101
|
+
width="260px"
|
|
94
102
|
style={{ margin: 'auto' }}
|
|
95
103
|
/>
|
|
96
104
|
<img
|
|
97
|
-
src="https://
|
|
105
|
+
src="https://assets.rspack.dev/others/assets/rsdoctor/bundle-size-modules-tags.png"
|
|
98
106
|
height="300px"
|
|
99
|
-
width="
|
|
107
|
+
width="340px"
|
|
100
108
|
style={{ margin: 'auto' }}
|
|
101
109
|
/>
|
|
102
110
|
</div>
|
|
@@ -116,7 +124,7 @@
|
|
|
116
124
|
点击 **「Bundle Size」** 页面的 **「Bundle Analyzer Graph」** 按钮，可以查看经典的瓦片图。
|
|
117
125
|
|
|
118
126
|
<img
|
|
119
|
-
src="https://
|
|
127
|
+
src="https://assets.rspack.dev/others/assets/rsdoctor/bundle-size-tile-graph.png"
|
|
120
128
|
width="500px"
|
|
121
129
|
style={{ margin: 'auto' }}
|
|
122
130
|
/>
|
|
@@ -132,17 +140,16 @@
|
|
|
132
140
|
|
|
133
141
|
Rsdoctor 兼容了对 BannerPlugin 这种添加代码的逻辑，但因为 Rsdoctor 需要添加标记代码，所以没有默认开启，以下两种情况会开启 Rsdoctor BannerPlugin 能力：
|
|
134
142
|
|
|
135
|
-
1. 项目在 `rspack.config.
|
|
143
|
+
1. 项目在 `rspack.config.(js|ts)` 或 `webpack.config.(js|ts)` 中使用了 BannerPlugin；
|
|
136
144
|
|
|
137
|
-
2. 通过 Rsdoctor options 配置 supports.banner 来开启：
|
|
145
|
+
2. 通过 Rsdoctor options 配置 `supports.banner` 来开启：
|
|
138
146
|
|
|
139
147
|
```ts
|
|
140
|
-
new RsdoctorRspackPlugin
|
|
148
|
+
new RsdoctorRspackPlugin({
|
|
141
149
|
supports: {
|
|
142
|
-
banner: true
|
|
143
|
-
}
|
|
144
|
-
)
|
|
145
|
-
|
|
150
|
+
banner: true,
|
|
151
|
+
},
|
|
152
|
+
});
|
|
146
153
|
```
|
|
147
154
|
|
|
148
155
|
- 注：如果开启了 `drop_console` 将会影响 Rsdoctor 对 BannerPlugin 的分析，所以可以在 `RSDOCTOR = true` 时，关闭 `drop_console`。
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
我们还集成了一些基于编译数据做检测的能力，如果本次编译结果中，存在命中了我们定义的[规则](../more/rules)的数据，则会在 **Rsdoctor** 主界面下方出现 `Compile Alerts` 模块，参考下图所示：
|
|
4
4
|
|
|
5
|
-
<img src="https://
|
|
5
|
+
<img src="https://assets.rspack.dev/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://
|
|
8
|
+
src="https://assets.rspack.dev/others/assets/rsdoctor/compile-overall-1.jpg"
|
|
9
9
|
width="400px"
|
|
10
10
|
height="600px"
|
|
11
11
|
style={{ margin: 'auto' }}
|
|
@@ -19,12 +19,12 @@
|
|
|
19
19
|
|
|
20
20
|
以下是卡片内每个阶段名词的含义以及代码实现：
|
|
21
21
|
|
|
22
|
-
| 阶段名称 | 描述说明 | 代码实现
|
|
23
|
-
| ---------------------------------------- | ------------------------------------------------ |
|
|
24
|
-
| <b><i>Bootstrap -> BeforeCompile</i></b> | 代表项目从启动到开始编译之前的耗时 | <ul><li
|
|
25
|
-
| <b><i>Compile</i></b> | 代表项目的整个编译耗时 | <ul><li
|
|
26
|
-
| <b><i>AfterCompile -> Done</i></b> | 代表编译结束到整个流程结束的耗时 | <ul><li
|
|
27
|
-
| <b><i>Minify</i></b> | 绝大部分情况下，代表项目编译流程内文件压缩的耗时 | <ul><li
|
|
22
|
+
| 阶段名称 | 描述说明 | 代码实现 |
|
|
23
|
+
| ---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
24
|
+
| <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> |
|
|
25
|
+
| <b><i>Compile</i></b> | 代表项目的整个编译耗时 | <ul><li>在 **compiler.hooks.beforeCompile** 被调用时的时间点作为<b>开始时间</b>，在 **compiler.hooks.afterCompile** 被调用时的时间点作为<b>结束时间</b></li></ul> |
|
|
26
|
+
| <b><i>AfterCompile -> Done</i></b> | 代表编译结束到整个流程结束的耗时 | <ul><li>在 **compiler.hooks.afterCompile** 被调用时的时间点作为<b>开始时间</b>，在 **compiler.hooks.done** 被调用时的时间点作为<b>结束时间</b></li></ul> |
|
|
27
|
+
| <b><i>Minify</i></b> | 绝大部分情况下，代表项目编译流程内文件压缩的耗时 | <ul><li>统计 **compilation.hooks.optimizeChunkAssets** 和 **compilation.hooks.processAssets** 每次<b>调用时间之和</b></li></ul> |
|
|
28
28
|
|
|
29
29
|
## 使用说明
|
|
30
30
|
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
通过**点击 `Bootstrap -> BeforeCompile` 阶段后的数据**会在页面中弹出一个浮层，其内容如下图所示：
|
|
34
34
|
|
|
35
35
|
<img
|
|
36
|
-
src="https://
|
|
36
|
+
src="https://assets.rspack.dev/others/assets/rsdoctor/compile-overall-boostrap.jpg"
|
|
37
37
|
width="600px"
|
|
38
38
|
style={{ margin: 'auto' }}
|
|
39
39
|
/>
|
|
@@ -56,12 +56,12 @@
|
|
|
56
56
|
|
|
57
57
|
该部分可以查看导航栏 「Compile Analysis」-> 「Loader Analysis」-> [**Loader Timeline**](./loaders-timeline.mdx) 来查看 Loader 编译耗时时序图。
|
|
58
58
|
|
|
59
|
-
### AfterCompile ->
|
|
59
|
+
### AfterCompile -> done 耗时详情
|
|
60
60
|
|
|
61
61
|
通过**点击 `AfterCompile -> Done` 阶段后的数据**会在页面中弹出一个浮层，其内容如下图所示：
|
|
62
62
|
|
|
63
63
|
<img
|
|
64
|
-
src="https://
|
|
64
|
+
src="https://assets.rspack.dev/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://
|
|
80
|
+
src="https://assets.rspack.dev/others/assets/rsdoctor/compile-overall-aftercompile-2.jpg"
|
|
81
81
|
width="600px"
|
|
82
82
|
style={{ margin: 'auto' }}
|
|
83
83
|
/>
|
|
@@ -104,8 +104,8 @@ Rspack 项目中暂时获取不到 Minify 耗时详情。
|
|
|
104
104
|
|
|
105
105
|
通过**点击 `Minify` 阶段后的数据**会在页面中弹出一个浮层，其内容如下图所示：
|
|
106
106
|
|
|
107
|
-
| <img src="https://
|
|
108
|
-
|
|
|
107
|
+
| <img src="https://assets.rspack.dev/others/assets/rsdoctor/compile-overall-minify-1.jpg" /> | <img src="https://assets.rspack.dev/others/assets/rsdoctor/compile-overall-minify-2.jpg" /> |
|
|
108
|
+
| ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
|
|
109
109
|
|
|
110
110
|
整个浮层中的数据含义与前面的段落内容基本一致，此处不再重复介绍。
|
|
111
111
|
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
首先，我们在该模块可以直接看到所有被 Loader 所处理过的文件树结构，如下图所示：
|
|
10
10
|
|
|
11
11
|
<img
|
|
12
|
-
src="https://
|
|
12
|
+
src="https://assets.rspack.dev/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://
|
|
32
|
+
src="https://assets.rspack.dev/others/assets/rsdoctor/loader-analysis-table.png"
|
|
33
33
|
width="300px"
|
|
34
34
|
height="400px"
|
|
35
35
|
style={{ margin: 'auto' }}
|
|
@@ -53,18 +53,18 @@
|
|
|
53
53
|
- 「**模块右侧**」：当前选中的 Loader **调用时**的**输入输出**和**参数数据信息**。
|
|
54
54
|
|
|
55
55
|
<img
|
|
56
|
-
src="https://
|
|
56
|
+
src="https://assets.rspack.dev/others/assets/rsdoctor/loader-analysis-code-change.png"
|
|
57
57
|
width="600px"
|
|
58
58
|
style={{ margin: 'auto' }}
|
|
59
|
-
/>
|
|
59
|
+
/>
|
|
60
60
|
|
|
61
61
|
- **参数数据信息**：点击「**show more**」或者左上角展开按钮，可查看对应参数信息。
|
|
62
62
|
|
|
63
63
|
<img
|
|
64
|
-
src="https://
|
|
64
|
+
src="https://assets.rspack.dev/others/assets/rsdoctor/loader-analysis-options.png"
|
|
65
65
|
width="600px"
|
|
66
66
|
style={{ margin: 'auto' }}
|
|
67
|
-
/>
|
|
67
|
+
/>
|
|
68
68
|
|
|
69
69
|
如图所示，我们可以获得 **目标文件** 的以下信息：
|
|
70
70
|
|
|
@@ -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://
|
|
8
|
+
src="https://assets.rspack.dev/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://
|
|
37
|
+
src="https://assets.rspack.dev/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://
|
|
47
|
+
src="https://assets.rspack.dev/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://
|
|
55
|
+
src="https://assets.rspack.dev/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://
|
|
65
|
+
src="https://assets.rspack.dev/others/assets/rsdoctor/loader-timeline-loader-file.png"
|
|
66
66
|
width="700"
|
|
67
67
|
style={{ margin: 'auto' }}
|
|
68
68
|
/>
|