@rsdoctor/docs 1.1.5 → 1.1.7-beta.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/docs/en/guide/start/mcp.mdx +12 -1
- package/docs/en/guide/usage/bundle-size.mdx +14 -2
- package/docs/en/guide/usage/module-analysis.mdx +22 -0
- package/docs/zh/guide/start/mcp.mdx +12 -1
- package/docs/zh/guide/usage/bundle-size.mdx +14 -2
- package/docs/zh/guide/usage/module-analysis.mdx +22 -0
- package/package.json +4 -4
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
**@rsdoctor/mcp-server** provides four core analysis capabilities:
|
|
10
10
|
|
|
11
11
|
- **Bundle Analysis**: Analyzes bundle size, composition and other information
|
|
12
|
-
- **Dependency Analysis**: Analyzes project dependencies and
|
|
12
|
+
- **Dependency Analysis**: Analyzes project dependency relationships, duplicate dependencies, and Tree Shaking issues.
|
|
13
13
|
- **Bundle Optimization Suggestions**: Provides suggestions for bundle size optimization and code splitting
|
|
14
14
|
- **Compilation Optimization Suggestions**: Analyzes compilation time and provides compilation performance optimization suggestions
|
|
15
15
|
|
|
@@ -81,6 +81,17 @@ Example video:
|
|
|
81
81
|
playsInline
|
|
82
82
|
/>
|
|
83
83
|
|
|
84
|
+
### 4. Tree Shaking Issues
|
|
85
|
+
|
|
86
|
+
By asking "Please help me to check why react-dom/client.js can not be tree-shaken?", the tool will help analyze why this module cannot be tree-shaken.
|
|
87
|
+
|
|
88
|
+
> Note: Please use Rsdoctor plugin version 1.1.5 or above.
|
|
89
|
+
|
|
90
|
+
<img
|
|
91
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/tree-shake-mcp.png"
|
|
92
|
+
alt="tree-shaking"
|
|
93
|
+
/>
|
|
94
|
+
|
|
84
95
|
## Quick start
|
|
85
96
|
|
|
86
97
|
### 💡 Version requirements
|
|
@@ -128,12 +128,24 @@ The **Modules** tag is shown in the right image, from left to right representing
|
|
|
128
128
|
- **Module Explorer** tag: Click to open the dependency analysis page between `Modules`.
|
|
129
129
|
- **Code View** tag: Click to expand code segments, including `Source` (source code), `Transformed` (compiled code), and `Bundled` (bundled code).
|
|
130
130
|
|
|
131
|
+
### Module details
|
|
132
|
+
|
|
133
|
+
Click the module tag to view module details, as shown below:
|
|
134
|
+
|
|
135
|
+
<img src="https://assets.rspack.rs/others/assets/rsdoctor/bailout-reason.gif" />
|
|
136
|
+
|
|
137
|
+
- **Reasons**: This refers to the reason why a Module exists, i.e., which Modules import this Module. The entire Reasons Tree shows the upstream reference chain of this Module, including both direct and indirect parents. This corresponds to Rspack's `stats.reasons`.
|
|
138
|
+
- **Dependencies**: The Modules that this Module depends on.
|
|
139
|
+
- **Bailout Reason**: The reason why this Module failed Tree Shaking during the build process.
|
|
140
|
+
|
|
141
|
+
> For more details, see: [Module details](/guide/usage/module-analysis)
|
|
142
|
+
|
|
131
143
|
## Bundle tile graph
|
|
132
144
|
|
|
133
145
|
Click the **"Tile Graph"** label on the **"Bundle Size"** page to view the tile graph. The tile graph clearly shows the proportion and relationship between resources and modules, as shown in the following image:
|
|
134
146
|
|
|
135
147
|
<img
|
|
136
|
-
src="https://
|
|
148
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/treemap.png"
|
|
137
149
|
width="500px"
|
|
138
150
|
style={{ margin: 'auto' }}
|
|
139
151
|
/>
|
|
@@ -141,7 +153,7 @@ Click the **"Tile Graph"** label on the **"Bundle Size"** page to view the tile
|
|
|
141
153
|
You can also click the 🔍 button on the card title to search for Module resources, click the Module resource, and zoom in to the Module area, as shown in the following image:
|
|
142
154
|
|
|
143
155
|
<img
|
|
144
|
-
src="https://
|
|
156
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/treemap.gif"
|
|
145
157
|
width="500px"
|
|
146
158
|
style={{ margin: 'auto' }}
|
|
147
159
|
/>
|
|
@@ -27,6 +27,7 @@ Clicking on an **Assets** in the **[Bundle Size](./bundle-size)** page will disp
|
|
|
27
27
|
|
|
28
28
|
- **`Reasons`**: As the name suggests, it means the reasons why a `Module` exists. Reasons indicate which other `Module`s import this `Module`, and the entire `Reasons Tree` represents the upstream reference chain of this `Module`, including both direct and indirect parent `Module`s. [Similar to Webpack's stats.reasons.](https://webpack.js.org/configuration/stats/#statsreasons)
|
|
29
29
|
- **`Dependencies`**: The `Module`s that this `Module` depends on.
|
|
30
|
+
- **`Bailout Reason`** : The reason why this `Module` failed Tree Shaking.
|
|
30
31
|
|
|
31
32
|
## Reasons dependency tree
|
|
32
33
|
|
|
@@ -56,3 +57,24 @@ The `Reasons Tree` displays the dependency chain of this `Module`, showing which
|
|
|
56
57
|
width="600px"
|
|
57
58
|
style={{ margin: 'auto' }}
|
|
58
59
|
/>
|
|
60
|
+
|
|
61
|
+
## Bailout Reason
|
|
62
|
+
|
|
63
|
+
### Usage
|
|
64
|
+
|
|
65
|
+
`Bailout Reason` shows the reason why this `Module` failed Tree Shaking.
|
|
66
|
+
|
|
67
|
+
<img
|
|
68
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/bailout-reason.gif"
|
|
69
|
+
width="600px"
|
|
70
|
+
style={{ margin: 'auto' }}
|
|
71
|
+
/>
|
|
72
|
+
|
|
73
|
+
You can also use MCP for analysis. By asking "Please help me to check why react-dom/client.js can not be tree-shaken?", the tool will help analyze why this module cannot be tree-shaken.
|
|
74
|
+
|
|
75
|
+
<img
|
|
76
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/tree-shake-mcp.png"
|
|
77
|
+
alt="tree-shaking"
|
|
78
|
+
/>
|
|
79
|
+
|
|
80
|
+
> For MCP analysis, see [MCP Analysis](/guide/start/mcp)
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
**@rsdoctor/mcp-server** 提供四大类核心分析能力：
|
|
10
10
|
|
|
11
11
|
- **产物信息分析**: 分析构建产物的体积、组成等信息
|
|
12
|
-
- **依赖问题分析**:
|
|
12
|
+
- **依赖问题分析**: 分析项目依赖关系、重复依赖、Tree Shaking 等问题
|
|
13
13
|
- **产物优化建议**: 提供产物体积优化、代码分割等建议
|
|
14
14
|
- **编译优化建议**: 分析编译耗时，提供编译性能优化建议
|
|
15
15
|
|
|
@@ -81,6 +81,17 @@
|
|
|
81
81
|
playsInline
|
|
82
82
|
/>
|
|
83
83
|
|
|
84
|
+
### 4. Tree shaking 问题
|
|
85
|
+
|
|
86
|
+
通过提问 "Please help me to check why react-dom/client.js can not be tree-shaken?"，工具会帮忙分析该模块没有被 Tree shaking 的原因。
|
|
87
|
+
|
|
88
|
+
> 注意：请使用 1.1.5 及以上版本的 Rsdoctor 插件。
|
|
89
|
+
|
|
90
|
+
<img
|
|
91
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/tree-shake-mcp.png"
|
|
92
|
+
alt="tree-shaking"
|
|
93
|
+
/>
|
|
94
|
+
|
|
84
95
|
## 快速开始
|
|
85
96
|
|
|
86
97
|
### 💡 版本要求
|
|
@@ -119,12 +119,24 @@
|
|
|
119
119
|
- **Module Explorer** 标签：点击可打开 `Module` 之间的依赖关系分析页面。
|
|
120
120
|
- **代码查看** 标签，点击可展开代码段，包括 `Source`（源码）、`Transformed`（编译后代码）和 `Bundled`（打包后代码）。
|
|
121
121
|
|
|
122
|
+
### Module 详情
|
|
123
|
+
|
|
124
|
+
点击模块标签，可以查看模块详情，如下图所示：
|
|
125
|
+
|
|
126
|
+
<img src="https://assets.rspack.rs/others/assets/rsdoctor/bailout-reason.gif" />
|
|
127
|
+
|
|
128
|
+
- Reasons : 顾名思义是 [原因] 的意思，即某个 Module 存在的原因。Reasons 就是该 Module 被哪些 Module 们引入，而整个 Reasons Tree 就是这个 Module 的整个上游引用链，包括了直接父级和间接父级们。即 Rspack 的 stats.reasons。
|
|
129
|
+
- Dependencies : 是该 Module 依赖了哪些 Module。
|
|
130
|
+
- Bailout Reason : Tree shaking 时，该 Module Tree shaking 失败的原因。
|
|
131
|
+
|
|
132
|
+
> 更多可查看详情：[Module 详情](/guide/usage/module-analysis)
|
|
133
|
+
|
|
122
134
|
## 产物总览瓦片图
|
|
123
135
|
|
|
124
136
|
点击 **「Bundle Size」** 页面的 **「Tile Graph」** 标签，可以查看瓦片图。通过瓦片图可以清晰的看到各个资源和模块之间的占比和关系，如下图所示：
|
|
125
137
|
|
|
126
138
|
<img
|
|
127
|
-
src="https://
|
|
139
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/treemap.png"
|
|
128
140
|
width="500px"
|
|
129
141
|
style={{ margin: 'auto' }}
|
|
130
142
|
/>
|
|
@@ -132,7 +144,7 @@
|
|
|
132
144
|
同时可以点击卡片标题侧的 🔍 按钮，搜索 Module 资源，点击 Module 资源，可以放大到该 Module 区域，如下图所示：
|
|
133
145
|
|
|
134
146
|
<img
|
|
135
|
-
src="https://
|
|
147
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/treemap.gif"
|
|
136
148
|
width="500px"
|
|
137
149
|
style={{ margin: 'auto' }}
|
|
138
150
|
/>
|
|
@@ -29,6 +29,7 @@
|
|
|
29
29
|
|
|
30
30
|
- **`Reasons`** : 顾名思义是 `[原因]` 的意思，即某个 `Module` 存在的原因。Reasons 就是该 `Module` 被哪些 `Module` 们引入，而整个 `Reasons Tree` 就是这个 `Module` 的整个上游引用链，包括了直接父级和间接父级们。[即 Rspack 的 stats.reasons。](https://webpack.js.org/configuration/stats/#statsreasons)
|
|
31
31
|
- **`Dependencies`** : 是该 `Module` 依赖了哪些 `Module`。
|
|
32
|
+
- **`Bailout Reason`** : Tree shaking 时，该 `Module` Tree shaking 失败的原因。
|
|
32
33
|
|
|
33
34
|
## Reasons 依赖树
|
|
34
35
|
|
|
@@ -58,3 +59,24 @@
|
|
|
58
59
|
width="600px"
|
|
59
60
|
style={{ margin: 'auto' }}
|
|
60
61
|
/>
|
|
62
|
+
|
|
63
|
+
## Bailout Reason
|
|
64
|
+
|
|
65
|
+
### 使用介绍
|
|
66
|
+
|
|
67
|
+
`Bailout Reason` 展示了该 `Module` 在 Tree shaking 时失败的原因。
|
|
68
|
+
|
|
69
|
+
<img
|
|
70
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/bailout-reason.gif"
|
|
71
|
+
width="600px"
|
|
72
|
+
style={{ margin: 'auto' }}
|
|
73
|
+
/>
|
|
74
|
+
|
|
75
|
+
还可以使用 MCP 进行分析，通过提问 "Please help me to check why react-dom/client.js can not be tree-shaken?"，工具会帮忙分析该模块没有被 Tree shaking 的原因。
|
|
76
|
+
|
|
77
|
+
<img
|
|
78
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/tree-shake-mcp.png"
|
|
79
|
+
alt="tree-shaking"
|
|
80
|
+
/>
|
|
81
|
+
|
|
82
|
+
> MCP 分析请查看 [MCP 分析](/guide/start/mcp)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rsdoctor/docs",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.7-beta.0",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "https://github.com/web-infra-dev/rsdoctor",
|
|
@@ -19,9 +19,9 @@
|
|
|
19
19
|
"registry": "https://registry.npmjs.org/"
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
|
+
"@rspress/plugin-algolia": "2.0.0-beta.18",
|
|
23
|
+
"@rspress/plugin-llms": "2.0.0-beta.18",
|
|
22
24
|
"@rspress/plugin-rss": "2.0.0-beta.6",
|
|
23
|
-
"@rspress/plugin-llms": "2.0.0-beta.16",
|
|
24
|
-
"@rspress/plugin-algolia": "2.0.0-beta.16",
|
|
25
25
|
"@types/node": "^22.8.1",
|
|
26
26
|
"@types/react": "^18.3.23",
|
|
27
27
|
"@types/react-dom": "^18.3.7",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"rspress-plugin-font-open-sans": "^1.0.0",
|
|
33
33
|
"rspress-plugin-sitemap": "^1.1.4",
|
|
34
34
|
"typescript": "^5.2.2",
|
|
35
|
-
"@rsdoctor/types": "1.1.
|
|
35
|
+
"@rsdoctor/types": "1.1.7-beta.0"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@rstack-dev/doc-ui": "1.10.6",
|