@rsdoctor/docs 1.1.3 → 1.1.5
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/config/options/options.mdx +3 -10
- package/docs/en/guide/more/faq.mdx +50 -0
- package/docs/en/guide/start/_meta.json +1 -1
- package/docs/en/guide/start/mcp.mdx +239 -0
- package/docs/en/guide/usage/bundle-size.mdx +13 -5
- package/docs/zh/config/options/options.mdx +3 -9
- package/docs/zh/guide/more/faq.mdx +50 -0
- package/docs/zh/guide/start/_meta.json +1 -1
- package/docs/zh/guide/start/mcp.mdx +239 -0
- package/docs/zh/guide/usage/bundle-size.mdx +12 -4
- package/package.json +7 -7
|
@@ -295,18 +295,11 @@ type ISupport = {
|
|
|
295
295
|
|
|
296
296
|
If `supports.banner` is enabled, Rsdoctor will enable compatibility logic for BannerPlugin. For more details, please refer to: [Supports BannerPlugin](../../guide/usage/bundle-size#supports-bannerplugin)
|
|
297
297
|
|
|
298
|
-
#### generateTileGraph
|
|
298
|
+
#### ~~generateTileGraph [**Deprecated**]~~
|
|
299
299
|
|
|
300
|
-
|
|
301
|
-
- type: boolean.
|
|
302
|
-
|
|
303
|
-
Whether to enable the ability to generate tile graphs, which affects whether the Bundle Size page has a tile graph from `webpack-bundle-analyzer`.
|
|
300
|
+
<Badge text="Deprecated" type="warning" />
|
|
304
301
|
|
|
305
|
-
|
|
306
|
-
src="https://assets.rspack.rs/others/assets/rsdoctor/bundle-size-tile-graph.png"
|
|
307
|
-
width="500px"
|
|
308
|
-
style={{ margin: 'auto' }}
|
|
309
|
-
/>
|
|
302
|
+
Rsdoctor supports generating Tree Map graphs by default, so this option does not need to be configured.
|
|
310
303
|
|
|
311
304
|
#### parseBundle
|
|
312
305
|
|
|
@@ -61,6 +61,56 @@ module.exports = {
|
|
|
61
61
|
- Cause: During the build process, the source code information is stored, which exceeds the memory limit. Enabling the `lite` mode can alleviate this issue.
|
|
62
62
|
- Difference: The difference between the **lite mode** and the **normal mode** is that the **lite mode** no longer stores the **source code information**, only the **bundled code** is stored. Additionally, the code displayed in the analysis report will only consist of the **bundled code**.
|
|
63
63
|
|
|
64
|
+
## Bundle analysis page no `Bundled Size`?
|
|
65
|
+
|
|
66
|
+
### Issue Description
|
|
67
|
+
|
|
68
|
+
The difference between `Source Size` and `Bundled Size`:
|
|
69
|
+
|
|
70
|
+
- **Source Size**: The original size of the Module source code file (marked in purple in the image below).
|
|
71
|
+
- **Bundled Size**: The final code size of the Module after bundling and minification (marked in cyan in the image below).
|
|
72
|
+
|
|
73
|
+
<img src="https://assets.rspack.rs/others/assets/rsdoctor/bundle-size-overall.png" />
|
|
74
|
+
|
|
75
|
+
### Root Cause
|
|
76
|
+
|
|
77
|
+
When [optimization.concatenateModules](https://rspack.rs/config/optimization#optimizationconcatenatemodules) is set to `true`, Rsdoctor cannot use `acorn` to parse the build artifacts and break down the actual code size of each **Module**, therefore it cannot display the `Bundled Size`.
|
|
78
|
+
|
|
79
|
+
### Solution
|
|
80
|
+
|
|
81
|
+
:::danger
|
|
82
|
+
**Important Note:** You must check the `RSDOCTOR` environment variable and not modify ConcatenateModules directly! ConcatenateModules is enabled by default in production environments, and disabling it in production builds will increase the bundle size.
|
|
83
|
+
:::
|
|
84
|
+
|
|
85
|
+
When enabling Rsdoctor analysis, set **concatenateModules to false** as shown below. **Note: Disabling `concatenateModules` will slightly increase bundle size, creating differences from production builds.**
|
|
86
|
+
|
|
87
|
+
```js rspack.config.mjs
|
|
88
|
+
export default {
|
|
89
|
+
optimization: {
|
|
90
|
+
concatenateModules:
|
|
91
|
+
process.env.NODE_ENV === 'production' && !process.env.RSDOCTOR, // Must check RSDOCTOR environment variable, do not modify concatenateModules directly!
|
|
92
|
+
},
|
|
93
|
+
};
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
- In the rspeedy project, configure it in `rspeedy.config.ts`:
|
|
97
|
+
|
|
98
|
+
```js rspeedy.config.ts
|
|
99
|
+
export default {
|
|
100
|
+
tools: {
|
|
101
|
+
rspack(config, { env }) {
|
|
102
|
+
if (process.env.RSDOCTOR === 'true') {
|
|
103
|
+
config.optimization = {
|
|
104
|
+
...config.optimization,
|
|
105
|
+
concatenateModules: false,
|
|
106
|
+
},
|
|
107
|
+
return config
|
|
108
|
+
}
|
|
109
|
+
},
|
|
110
|
+
},
|
|
111
|
+
};
|
|
112
|
+
```
|
|
113
|
+
|
|
64
114
|
## The loader of CssExtractRspackPlugin takes too long
|
|
65
115
|
|
|
66
116
|
When using Rsdoctor to analyze the compilation time of Rspack projects, you may find that the loader of [CssExtractRspackPlugin](https://rspack.rs/plugins/rspack/css-extract-rspack-plugin) takes a long time. However, this figure does not represent the actual time taken by the CssExtractRspackPlugin's loader; it also includes the time taken by other loaders involved in compiling this module.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
["intro", "quick-start", "features", "cicd", "cli"]
|
|
1
|
+
["intro", "quick-start", "features", "cicd", "cli", "mcp"]
|
|
@@ -0,0 +1,239 @@
|
|
|
1
|
+
# MCP Server
|
|
2
|
+
|
|
3
|
+
## Introduction
|
|
4
|
+
|
|
5
|
+
@rsdoctor/mcp-server is an MCP Server tool designed to help users more conveniently utilize Rsdoctor's build data. It works with Rsdoctor's local build analysis data and helps you quickly obtain build analysis results through a Q&A interface.
|
|
6
|
+
|
|
7
|
+
## Core features
|
|
8
|
+
|
|
9
|
+
**@rsdoctor/mcp-server** provides four core analysis capabilities:
|
|
10
|
+
|
|
11
|
+
- **Bundle Analysis**: Analyzes bundle size, composition and other information
|
|
12
|
+
- **Dependency Analysis**: Analyzes project dependencies and duplicate dependency issues
|
|
13
|
+
- **Bundle Optimization Suggestions**: Provides suggestions for bundle size optimization and code splitting
|
|
14
|
+
- **Compilation Optimization Suggestions**: Analyzes compilation time and provides compilation performance optimization suggestions
|
|
15
|
+
|
|
16
|
+
## Usage examples
|
|
17
|
+
|
|
18
|
+
### 1. Bundle optimization analysis
|
|
19
|
+
|
|
20
|
+
By asking "Please help me to optimize the bundle or artifacts", the tool will analyze the build output and provide optimization suggestions.
|
|
21
|
+
|
|
22
|
+
Example video:
|
|
23
|
+
|
|
24
|
+
<video
|
|
25
|
+
src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/mcp-bundle-optimize-2.mp4"
|
|
26
|
+
style={{
|
|
27
|
+
width: '100%',
|
|
28
|
+
height: 'auto',
|
|
29
|
+
maxHeight: '50vh',
|
|
30
|
+
objectFit: 'cover',
|
|
31
|
+
display: 'block',
|
|
32
|
+
}}
|
|
33
|
+
autoPlay={true}
|
|
34
|
+
muted={true}
|
|
35
|
+
controls={true}
|
|
36
|
+
loop={true}
|
|
37
|
+
playsInline
|
|
38
|
+
/>
|
|
39
|
+
|
|
40
|
+
### 2. Dependency analysis
|
|
41
|
+
|
|
42
|
+
By asking "Please investigate the referrer dependency of node_modules/dayjs/index.js", the tool will analyze the dependency relationships of the specified module.
|
|
43
|
+
|
|
44
|
+
Example video:
|
|
45
|
+
|
|
46
|
+
<video
|
|
47
|
+
src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/issuer-path.mp4"
|
|
48
|
+
style={{
|
|
49
|
+
width: '100%',
|
|
50
|
+
height: 'auto',
|
|
51
|
+
maxHeight: '50vh',
|
|
52
|
+
objectFit: 'cover',
|
|
53
|
+
display: 'block',
|
|
54
|
+
}}
|
|
55
|
+
autoPlay={true}
|
|
56
|
+
muted={true}
|
|
57
|
+
controls={true}
|
|
58
|
+
loop={true}
|
|
59
|
+
playsInline
|
|
60
|
+
/>
|
|
61
|
+
|
|
62
|
+
### 3. Compilation performance analysis
|
|
63
|
+
|
|
64
|
+
By asking "Please help me find files or loaders with high compilation time and provide optimization suggestions", the tool will analyze compilation time and provide optimization suggestions.
|
|
65
|
+
|
|
66
|
+
Example video:
|
|
67
|
+
|
|
68
|
+
<video
|
|
69
|
+
src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/loader-mcp.mp4"
|
|
70
|
+
style={{
|
|
71
|
+
width: '100%',
|
|
72
|
+
height: 'auto',
|
|
73
|
+
maxHeight: '50vh',
|
|
74
|
+
objectFit: 'cover',
|
|
75
|
+
display: 'block',
|
|
76
|
+
}}
|
|
77
|
+
autoPlay={true}
|
|
78
|
+
muted={true}
|
|
79
|
+
controls={true}
|
|
80
|
+
loop={true}
|
|
81
|
+
playsInline
|
|
82
|
+
/>
|
|
83
|
+
|
|
84
|
+
## Quick start
|
|
85
|
+
|
|
86
|
+
### 💡 Version requirements
|
|
87
|
+
|
|
88
|
+
:::warning
|
|
89
|
+
The following Rsdoctor plugin versions are required:
|
|
90
|
+
|
|
91
|
+
- @rsdoctor/rspack-plugin >= 1.1.2
|
|
92
|
+
- @rsdoctor/webpack-plugin >= 1.1.2
|
|
93
|
+
|
|
94
|
+
Note: Please ensure you are using the latest version for the best experience.
|
|
95
|
+
:::
|
|
96
|
+
|
|
97
|
+
### 1. Plugin configuration
|
|
98
|
+
|
|
99
|
+
If you haven't added the Rsdoctor plugin yet, you need to configure it in your project. [👉🏻 Quick Start](https://rsdoctor.rs/guide/start/quick-start).
|
|
100
|
+
|
|
101
|
+
### 2. Enable Rsdoctor and run local build
|
|
102
|
+
|
|
103
|
+
Enable Rsdoctor and run the build. **Do not use MCP Client to start the project, as Rsdoctor's local service will block the MCP Client's dialogue process**.
|
|
104
|
+
|
|
105
|
+
```bash
|
|
106
|
+
# Enable Rsdoctor
|
|
107
|
+
|
|
108
|
+
RSDOCTOR=true npm run build
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
- Note: If `disableClientServer: true` is configured, it needs to be modified to `disableClientServer: false`, and `disableClientServer` defaults to false.
|
|
112
|
+
|
|
113
|
+
### 3. Start MCP Server
|
|
114
|
+
|
|
115
|
+
#### Cursor
|
|
116
|
+
|
|
117
|
+
1. Create a `.cursor/mcp.json` file in the project root directory:
|
|
118
|
+
|
|
119
|
+
```json
|
|
120
|
+
{
|
|
121
|
+
"mcpServers": {
|
|
122
|
+
"rsdoctor": {
|
|
123
|
+
"command": "npx",
|
|
124
|
+
"args": ["-y", "@rsdoctor/mcp-server@latest"]
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
2. Restart the Cursor editor
|
|
131
|
+
3. Start interaction in the MCP panel
|
|
132
|
+
|
|
133
|
+
#### Claude
|
|
134
|
+
|
|
135
|
+
Add configuration in `claude_desktop_config.json`:
|
|
136
|
+
|
|
137
|
+
```json
|
|
138
|
+
{
|
|
139
|
+
"mcpServers": {
|
|
140
|
+
"rsdoctor": {
|
|
141
|
+
"command": "npx",
|
|
142
|
+
"args": ["-y", "@rsdoctor/mcp-server@latest"]
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
#### Cline
|
|
149
|
+
|
|
150
|
+
Add configuration in the configuration file:
|
|
151
|
+
|
|
152
|
+
```json
|
|
153
|
+
{
|
|
154
|
+
"mcpServers": {
|
|
155
|
+
"rsdoctor": {
|
|
156
|
+
"command": "npx",
|
|
157
|
+
"args": ["-y", "@rsdoctor/mcp-server@latest"]
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
## Configuration instructions
|
|
164
|
+
|
|
165
|
+
### Command line parameters
|
|
166
|
+
|
|
167
|
+
| Parameter | Description | Default | Example |
|
|
168
|
+
| ---------- | ------------------------------------------- | ------------------------------------------------------------- | ---------------- |
|
|
169
|
+
| `compiler` | Specify the name of the compiler to analyze | Automatically detected | `--compiler web` |
|
|
170
|
+
| `port` | Specify the MCP Server port | Latest port number (written to ` ~/.cache/rsdoctor/mcp.json`) | `--port 1000` |
|
|
171
|
+
|
|
172
|
+
### Multi-compiler project configuration
|
|
173
|
+
|
|
174
|
+
In a multi-compiler project, each compiler will have a separate Rsdoctor build analysis data. Use the `--compiler` parameter to specify the compiler to analyze:
|
|
175
|
+
|
|
176
|
+
```bash
|
|
177
|
+
npx @rsdoctor/mcp-server@latest --compiler web
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
### Port configuration
|
|
181
|
+
|
|
182
|
+
1. Configure the MCP Server port:
|
|
183
|
+
|
|
184
|
+
```bash
|
|
185
|
+
npx @rsdoctor/mcp-server@latest --port 1000
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
2. Configure the Rsdoctor local service port:
|
|
189
|
+
|
|
190
|
+
```js
|
|
191
|
+
new RsdoctorRspackPlugin({
|
|
192
|
+
port: 9988,
|
|
193
|
+
});
|
|
194
|
+
```
|
|
195
|
+
|
|
196
|
+
## Tools list
|
|
197
|
+
|
|
198
|
+
### Product analysis tool
|
|
199
|
+
|
|
200
|
+
| Tool | Description | Parameters |
|
|
201
|
+
| ------------------------ | ------------------------------------------- | ---------------- |
|
|
202
|
+
| `get_chunks` | Get all code block information | - |
|
|
203
|
+
| `get_chunk_by_id` | Get specific code block information | chunkId (Number) |
|
|
204
|
+
| `get_large_chunks` | Get code blocks with large volume | - |
|
|
205
|
+
| `get_media_asset_prompt` | Get media resource optimization suggestions | - |
|
|
206
|
+
|
|
207
|
+
### Dependency analysis tool
|
|
208
|
+
|
|
209
|
+
| Tool | Description | Parameters |
|
|
210
|
+
| -------------------------- | -------------------------- | ------------------- |
|
|
211
|
+
| `get_modules` | Get all module information | - |
|
|
212
|
+
| `get_module_by_id` | Get module information | moduleId (Number) |
|
|
213
|
+
| `get_module_by_path` | Get module by path | modulePath (String) |
|
|
214
|
+
| `get_module_issuer_path` | Get module source path | moduleId (String) |
|
|
215
|
+
| `get_package_info` | Get package information | - |
|
|
216
|
+
| `get_package_dependencies` | Get dependency list | - |
|
|
217
|
+
| `get_duplicate_packages` | Get duplicate package list | - |
|
|
218
|
+
| `get_similar_packages` | Get similar package list | - |
|
|
219
|
+
|
|
220
|
+
### Performance analysis tool
|
|
221
|
+
|
|
222
|
+
| Tool | Description | Parameters |
|
|
223
|
+
| --------------------------- | ------------------------------------- | ---------- |
|
|
224
|
+
| `get_loader_time_all_files` | Get file loader time | - |
|
|
225
|
+
| `get_loader_times` | Get compilation directory loader time | - |
|
|
226
|
+
| `get_rule_info` | Get build rule scan results | - |
|
|
227
|
+
|
|
228
|
+
## Q&A
|
|
229
|
+
|
|
230
|
+
### 1. Connection issues
|
|
231
|
+
|
|
232
|
+
**Issue**: Unable to connect to Rsdoctor MCP Server or no data returned successfully
|
|
233
|
+
|
|
234
|
+
**Solution**:
|
|
235
|
+
|
|
236
|
+
- Ensure the Rsdoctor local Server has been successfully started.
|
|
237
|
+
- Manually start the local Server, do not use MCP Client to start the project, as the local service of Rsdoctor will block the dialogue process of MCP Client.
|
|
238
|
+
- If the Rsdoctor MCP server uses the `--port` parameter, please ensure the Rsdoctor startup port configuration is correct.
|
|
239
|
+
- Check if the Rsdoctor plugin version meets the requirements. [Version requirements](/guide/start/mcp#-version-requirements)
|
|
@@ -19,8 +19,8 @@ Click on the **"Bundle Size"** option in the navigation bar to view the Bundle a
|
|
|
19
19
|
|
|
20
20
|
- **`Assets`**: Resources refer to images, fonts, media, and other file types. They are the files that ultimately exist in the output folder. Each Chunk has corresponding [Assets resources](https://webpack.js.org/concepts/under-the-hood/#chunks).
|
|
21
21
|
- **`Module`**: One or more Modules combine to form a Chunk. For more information about Module types, please refer to [Rspack Modules](https://www.rspack.rs/api/modules.html) and [Webpack Modules](https://webpack.js.org/concepts/modules/#what-is-a-webpack-module).
|
|
22
|
-
- **`
|
|
23
|
-
- **`
|
|
22
|
+
- **`Source Size`**: The original size of the file, before any transformations and minification.
|
|
23
|
+
- **`Bundle Size`**: The final output size of the files. If you enabled minification, this value shows the minified size.
|
|
24
24
|
- **`Package Count`**: The number of third-party packages.
|
|
25
25
|
- **`Initial Chunk`**: The **initial** chunk is the main chunk of the entry point. This chunk contains all the modules specified by the entry point and their dependencies, unlike the **chunks** for "on-demand loading".
|
|
26
26
|
- For more information about Initial Chunk, please refer to [Initial Chunk Introduction](https://webpack.js.org/concepts/under-the-hood/#chunks).
|
|
@@ -128,12 +128,20 @@ 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
|
-
## Bundle
|
|
131
|
+
## Bundle tile graph
|
|
132
132
|
|
|
133
|
-
Click the **"
|
|
133
|
+
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
134
|
|
|
135
135
|
<img
|
|
136
|
-
src="https://
|
|
136
|
+
src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/treemap.png"
|
|
137
|
+
width="500px"
|
|
138
|
+
style={{ margin: 'auto' }}
|
|
139
|
+
/>
|
|
140
|
+
|
|
141
|
+
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
|
+
|
|
143
|
+
<img
|
|
144
|
+
src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/treemap.gif"
|
|
137
145
|
width="500px"
|
|
138
146
|
style={{ margin: 'auto' }}
|
|
139
147
|
/>
|
|
@@ -294,18 +294,12 @@ type ISupport = {
|
|
|
294
294
|
|
|
295
295
|
如果开启 `supports.banner` 则会开启 Rsdoctor 对 BannerPlugin 的兼容逻辑。详细请看:[支持 BannerPlugin](../../guide/usage/bundle-size#%E6%94%AF%E6%8C%81-bannerplugin)
|
|
296
296
|
|
|
297
|
-
#### generateTileGraph
|
|
297
|
+
#### ~~generateTileGraph [**Deprecated**]~~
|
|
298
298
|
|
|
299
|
-
|
|
300
|
-
- **类型:** `boolean`
|
|
299
|
+
<Badge text="Deprecated" type="warning" />
|
|
301
300
|
|
|
302
|
-
|
|
301
|
+
Rsdoctor 默认支持生成 Tree Map 图,所以不需要配置此选项。
|
|
303
302
|
|
|
304
|
-
<img
|
|
305
|
-
src="https://assets.rspack.rs/others/assets/rsdoctor/bundle-size-tile-graph.png"
|
|
306
|
-
width="500px"
|
|
307
|
-
style={{ margin: 'auto' }}
|
|
308
|
-
/>
|
|
309
303
|
#### parseBundle
|
|
310
304
|
|
|
311
305
|
- **类型:** `boolean`
|
|
@@ -59,6 +59,56 @@ module.exports = {
|
|
|
59
59
|
- 原因:因为构建过程中,存储了源码信息,超过了内存,所以开启 `lite` 模式可以缓解。
|
|
60
60
|
- 区别:`lite` 模式和普通模式的区别就是不再存储**源码信息**,只存储**打包后的代码**,同时分析报告上的代码也将**只有打包后的代码**。
|
|
61
61
|
|
|
62
|
+
## 产物分析界面没有 `Bundled Size` 怎么办?
|
|
63
|
+
|
|
64
|
+
### 问题说明
|
|
65
|
+
|
|
66
|
+
`Source Size` 和 `Bundled Size` 的区别:
|
|
67
|
+
|
|
68
|
+
- **Source Size**:Module 文件源码的原始大小(如下图紫色标识)。
|
|
69
|
+
- **Bundled Size**:经过打包及压缩后的 Module 的最终代码大小(如下图青色标识)。
|
|
70
|
+
|
|
71
|
+
<img src="https://assets.rspack.rs/others/assets/rsdoctor/bundle-size-overall.png" />
|
|
72
|
+
|
|
73
|
+
### 原因分析
|
|
74
|
+
|
|
75
|
+
当 [optimization.concatenateModules](https://rspack.rs/zh/config/optimization#optimizationconcatenatemodules) 配置为 `true` 时,Rsdoctor 无法通过 `acorn` 解析产物来分解出每个 **Module** 的实际代码大小,因此无法显示 `Bundled Size`。
|
|
76
|
+
|
|
77
|
+
### 解决方案
|
|
78
|
+
|
|
79
|
+
:::danger
|
|
80
|
+
**重要提醒:** 必须判断 `RSDOCTOR` 环境变量,不能直接修改 ConcatenateModules!线上环境默认开启 ConcatenateModules,线上构建环境中关闭会导致产物体积变大。
|
|
81
|
+
:::
|
|
82
|
+
|
|
83
|
+
**在开启 Rsdoctor 分析时,配置 concatenateModules 为 false**,如下所示。**同时要注意,关闭 concatenateModules 一定会导致产物体积略微变大,与线上环境的体积有一些差异。**
|
|
84
|
+
|
|
85
|
+
```js rspack.config.mjs
|
|
86
|
+
export default {
|
|
87
|
+
optimization: {
|
|
88
|
+
concatenateModules:
|
|
89
|
+
process.env.NODE_ENV === 'production' && !process.env.RSDOCTOR, // 需要判断 RSDOCTOR 环境变量,不可以直接修改 concatenateModules!
|
|
90
|
+
},
|
|
91
|
+
};
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
- rspeedy 项目中,在 `rspeedy.config.ts` 中配置:
|
|
95
|
+
|
|
96
|
+
```js rspeedy.config.ts
|
|
97
|
+
export default {
|
|
98
|
+
tools: {
|
|
99
|
+
rspack(config, { env }) {
|
|
100
|
+
if (process.env.RSDOCTOR === 'true') {
|
|
101
|
+
config.optimization = {
|
|
102
|
+
...config.optimization,
|
|
103
|
+
concatenateModules: false,
|
|
104
|
+
},
|
|
105
|
+
return config
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
},
|
|
109
|
+
};
|
|
110
|
+
```
|
|
111
|
+
|
|
62
112
|
## CssExtractRspackPlugin 的 loader 耗时过长问题
|
|
63
113
|
|
|
64
114
|
在使用 Rsdoctor 对 Rspack 项目进行编译耗时分析时,可能会发现 [CssExtractRspackPlugin](https://rspack.rs/plugins/rspack/css-extract-rspack-plugin) 的 loader 耗时较长。然而,这个数值并不代表 CssExtractRspackPlugin 的 loader 的真实耗时,它还包含了对本模块编译的其他 loader 的耗时。
|
|
@@ -1 +1 @@
|
|
|
1
|
-
["intro", "quick-start", "features", "cicd", "cli"]
|
|
1
|
+
["intro", "quick-start", "features", "cicd", "cli", "mcp"]
|
|
@@ -0,0 +1,239 @@
|
|
|
1
|
+
# MCP Server
|
|
2
|
+
|
|
3
|
+
## 介绍
|
|
4
|
+
|
|
5
|
+
@rsdoctor/mcp-server 是一个 MCP Server,旨在帮助用户更便捷地使用 Rsdoctor 的构建数据。它可以与 Rsdoctor 的本地构建分析数据配合使用,通过问答的形式,帮助你快速获取构建分析结果。
|
|
6
|
+
|
|
7
|
+
## 主要功能
|
|
8
|
+
|
|
9
|
+
**@rsdoctor/mcp-server** 提供四大类核心分析能力:
|
|
10
|
+
|
|
11
|
+
- **产物信息分析**: 分析构建产物的体积、组成等信息
|
|
12
|
+
- **依赖问题分析**: 分析项目依赖关系、重复依赖等问题
|
|
13
|
+
- **产物优化建议**: 提供产物体积优化、代码分割等建议
|
|
14
|
+
- **编译优化建议**: 分析编译耗时,提供编译性能优化建议
|
|
15
|
+
|
|
16
|
+
## 使用示例
|
|
17
|
+
|
|
18
|
+
### 1. 产物优化分析
|
|
19
|
+
|
|
20
|
+
通过提问 "Please help me to optimize the bundle or artifacts",工具会分析构建产物并给出优化建议。
|
|
21
|
+
|
|
22
|
+
示例视频:
|
|
23
|
+
|
|
24
|
+
<video
|
|
25
|
+
src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/mcp-bundle-optimize-2.mp4"
|
|
26
|
+
style={{
|
|
27
|
+
width: '100%',
|
|
28
|
+
height: 'auto',
|
|
29
|
+
maxHeight: '50vh',
|
|
30
|
+
objectFit: 'cover',
|
|
31
|
+
display: 'block',
|
|
32
|
+
}}
|
|
33
|
+
autoPlay={true}
|
|
34
|
+
muted={true}
|
|
35
|
+
controls={true}
|
|
36
|
+
loop={true}
|
|
37
|
+
playsInline
|
|
38
|
+
/>
|
|
39
|
+
|
|
40
|
+
### 2. 依赖分析
|
|
41
|
+
|
|
42
|
+
通过提问 "Please investigate the referrer dependency of node_modules/dayjs/index.js",工具会分析指定模块的依赖关系。
|
|
43
|
+
|
|
44
|
+
示例视频:
|
|
45
|
+
|
|
46
|
+
<video
|
|
47
|
+
src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/issuer-path.mp4"
|
|
48
|
+
style={{
|
|
49
|
+
width: '100%',
|
|
50
|
+
height: 'auto',
|
|
51
|
+
maxHeight: '50vh',
|
|
52
|
+
objectFit: 'cover',
|
|
53
|
+
display: 'block',
|
|
54
|
+
}}
|
|
55
|
+
autoPlay={true}
|
|
56
|
+
muted={true}
|
|
57
|
+
controls={true}
|
|
58
|
+
loop={true}
|
|
59
|
+
playsInline
|
|
60
|
+
/>
|
|
61
|
+
|
|
62
|
+
### 3. 编译性能分析
|
|
63
|
+
|
|
64
|
+
通过提问 "Please help me find files or loaders with high compilation time and provide optimization suggestions",工具会分析编译耗时并给出优化建议。
|
|
65
|
+
|
|
66
|
+
示例视频:
|
|
67
|
+
|
|
68
|
+
<video
|
|
69
|
+
src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/loader-mcp.mp4"
|
|
70
|
+
style={{
|
|
71
|
+
width: '100%',
|
|
72
|
+
height: 'auto',
|
|
73
|
+
maxHeight: '50vh',
|
|
74
|
+
objectFit: 'cover',
|
|
75
|
+
display: 'block',
|
|
76
|
+
}}
|
|
77
|
+
autoPlay={true}
|
|
78
|
+
muted={true}
|
|
79
|
+
controls={true}
|
|
80
|
+
loop={true}
|
|
81
|
+
playsInline
|
|
82
|
+
/>
|
|
83
|
+
|
|
84
|
+
## 快速开始
|
|
85
|
+
|
|
86
|
+
### 💡 版本要求
|
|
87
|
+
|
|
88
|
+
:::warning
|
|
89
|
+
需要使用以下 rsdoctor 插件(版本要求):
|
|
90
|
+
|
|
91
|
+
- @rsdoctor/rspack-plugin >= 1.1.2
|
|
92
|
+
- @rsdoctor/webpack-plugin >= 1.1.2
|
|
93
|
+
|
|
94
|
+
注意:请确保使用最新版本以获得最佳体验。
|
|
95
|
+
:::
|
|
96
|
+
|
|
97
|
+
### 1. 插件配置
|
|
98
|
+
|
|
99
|
+
如果还没有添加 Rsdoctor 插件,那么需要在项目中配置,[👉🏻 快速开始](https://rsdoctor.rs/guide/start/quick-start)。
|
|
100
|
+
|
|
101
|
+
### 2. 开启 Rsdoctor 并执行本地构建
|
|
102
|
+
|
|
103
|
+
开启 Rsdoctor 的情况下,执行构建。**不要使用 MCP Client 启动项目,因为 Rsdoctor 挂载的本地服务会卡住 MCP Client 的对话进程**。
|
|
104
|
+
|
|
105
|
+
```bash
|
|
106
|
+
# 开启 Rsdoctor
|
|
107
|
+
|
|
108
|
+
RSDOCTOR=true npm run build
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
- 注:如果配置了 `disableClientServer: true`,需要修改为 `disableClientServer: false`,disableClientServer 默认是 false。
|
|
112
|
+
|
|
113
|
+
### 3. 启动 MCP Server
|
|
114
|
+
|
|
115
|
+
#### Cursor
|
|
116
|
+
|
|
117
|
+
1. 在项目根目录创建 `.cursor/mcp.json`:
|
|
118
|
+
|
|
119
|
+
```json
|
|
120
|
+
{
|
|
121
|
+
"mcpServers": {
|
|
122
|
+
"rsdoctor": {
|
|
123
|
+
"command": "npx",
|
|
124
|
+
"args": ["-y", "@rsdoctor/mcp-server@latest"]
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
2. 重启 Cursor 编辑器
|
|
131
|
+
3. 在 MCP 面板中开始交互
|
|
132
|
+
|
|
133
|
+
#### Claude
|
|
134
|
+
|
|
135
|
+
在 `claude_desktop_config.json` 中添加配置:
|
|
136
|
+
|
|
137
|
+
```json
|
|
138
|
+
{
|
|
139
|
+
"mcpServers": {
|
|
140
|
+
"rsdoctor": {
|
|
141
|
+
"command": "npx",
|
|
142
|
+
"args": ["-y", "@rsdoctor/mcp-server@latest"]
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
#### Cline
|
|
149
|
+
|
|
150
|
+
在配置文件中添加:
|
|
151
|
+
|
|
152
|
+
```json
|
|
153
|
+
{
|
|
154
|
+
"mcpServers": {
|
|
155
|
+
"rsdoctor": {
|
|
156
|
+
"command": "npx",
|
|
157
|
+
"args": ["-y", "@rsdoctor/mcp-server@latest"]
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
## 配置说明
|
|
164
|
+
|
|
165
|
+
### 命令行参数
|
|
166
|
+
|
|
167
|
+
| 参数 | 说明 | 默认值 | 示例 |
|
|
168
|
+
| ---------- | ---------------------- | ----------------------------------------------------------- | ---------------- |
|
|
169
|
+
| `compiler` | 指定要分析的编译器名称 | 自动检测 | `--compiler web` |
|
|
170
|
+
| `port` | 指定 MCP Server 端口 | 最新启动的端口号(写入到 ` ~/.cache/rsdoctor/mcp.json` 中) | `--port 1000` |
|
|
171
|
+
|
|
172
|
+
### 多编译器项目配置
|
|
173
|
+
|
|
174
|
+
在多编译器项目中,每个编译器会有一份 Rsdoctor 构建分析数据。使用 `--compiler` 参数指定要分析的编译器:
|
|
175
|
+
|
|
176
|
+
```bash
|
|
177
|
+
npx @rsdoctor/mcp-server@latest --compiler web
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
### 端口配置
|
|
181
|
+
|
|
182
|
+
1. 配置 MCP Server 端口:
|
|
183
|
+
|
|
184
|
+
```bash
|
|
185
|
+
npx @rsdoctor/mcp-server@latest --port 1000
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
2. 配置 Rsdoctor 本地服务端口:
|
|
189
|
+
|
|
190
|
+
```js
|
|
191
|
+
new RsdoctorRspackPlugin({
|
|
192
|
+
port: 9988,
|
|
193
|
+
});
|
|
194
|
+
```
|
|
195
|
+
|
|
196
|
+
## Tools 介绍
|
|
197
|
+
|
|
198
|
+
### 产物分析工具
|
|
199
|
+
|
|
200
|
+
| 工具 | 说明 | 参数 |
|
|
201
|
+
| ------------------------ | -------------------- | ---------------- |
|
|
202
|
+
| `get_chunks` | 获取所有代码块信息 | - |
|
|
203
|
+
| `get_chunk_by_id` | 获取特定代码块信息 | chunkId (Number) |
|
|
204
|
+
| `get_large_chunks` | 获取体积过大的代码块 | - |
|
|
205
|
+
| `get_media_asset_prompt` | 获取媒体资源优化建议 | - |
|
|
206
|
+
|
|
207
|
+
### 依赖分析工具
|
|
208
|
+
|
|
209
|
+
| 工具 | 说明 | 参数 |
|
|
210
|
+
| -------------------------- | ---------------- | ------------------- |
|
|
211
|
+
| `get_modules` | 获取所有模块信息 | - |
|
|
212
|
+
| `get_module_by_id` | 获取模块信息 | moduleId (Number) |
|
|
213
|
+
| `get_module_by_path` | 根据路径获取模块 | modulePath (String) |
|
|
214
|
+
| `get_module_issuer_path` | 获取模块来源路径 | moduleId (String) |
|
|
215
|
+
| `get_package_info` | 获取包信息 | - |
|
|
216
|
+
| `get_package_dependencies` | 获取依赖列表 | - |
|
|
217
|
+
| `get_duplicate_packages` | 获取重复包列表 | - |
|
|
218
|
+
| `get_similar_packages` | 获取相似包列表 | - |
|
|
219
|
+
|
|
220
|
+
### 性能分析工具
|
|
221
|
+
|
|
222
|
+
| 工具 | 说明 | 参数 |
|
|
223
|
+
| --------------------------- | ------------------------ | ---- |
|
|
224
|
+
| `get_loader_time_all_files` | 获取文件 loader 耗时 | - |
|
|
225
|
+
| `get_loader_times` | 获取编译目录 loader 耗时 | - |
|
|
226
|
+
| `get_rule_info` | 获取构建规则扫描结果 | - |
|
|
227
|
+
|
|
228
|
+
## 常见问题
|
|
229
|
+
|
|
230
|
+
### 1. 连接问题
|
|
231
|
+
|
|
232
|
+
**问题**: 无法连接到 Rsdoctor MCP Server 或没有成功返回数据
|
|
233
|
+
|
|
234
|
+
**解决方案**:
|
|
235
|
+
|
|
236
|
+
- 确保 Rsdoctor 本地 Server 已成功启动。
|
|
237
|
+
- 手动启动本地 Server,请勿使用 MCP Client 启动项目,因为 Rsdoctor 的挂载的本地服务会卡住 MCP Client 的对话进程。
|
|
238
|
+
- 如果 Rsdoctor MCP server 使用了 `--port` 参数,请确保 Rsdoctor 的启动端口配置正确。
|
|
239
|
+
- 检查 Rsdoctor 插件版本是否符合要求。[版本要求](/guide/start/mcp#-%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82)
|
|
@@ -19,8 +19,8 @@
|
|
|
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.rs/api/modules.html) 和 [Webpack Modules](https://webpack.js.org/concepts/modules/#what-is-a-webpack-module)。
|
|
22
|
-
- **`
|
|
23
|
-
- **`
|
|
22
|
+
- **`Source Size`**:文件的原始大小,未经过任何转换和压缩。
|
|
23
|
+
- **`Bundle Size`**:文件最终输出的大小。如果开启了压缩,这个值代表压缩后的大小。
|
|
24
24
|
- **`Package Count`**:第三方包的数量。
|
|
25
25
|
- **`Initial Chunk`**: **initial(初始化)** 是入口起点的主 Chunk,该 chunk 包含入口起点指定的所有模块及其依赖项,与「**按需加载**」的 **Chunk** 资源不同。
|
|
26
26
|
- 有关 Initial Chunk 的详细信息,请参阅 [Initial Chunk 介绍](https://webpack.js.org/concepts/under-the-hood/#chunks)。
|
|
@@ -121,10 +121,18 @@
|
|
|
121
121
|
|
|
122
122
|
## 产物总览瓦片图
|
|
123
123
|
|
|
124
|
-
点击 **「Bundle Size」** 页面的 **「
|
|
124
|
+
点击 **「Bundle Size」** 页面的 **「Tile Graph」** 标签,可以查看瓦片图。通过瓦片图可以清晰的看到各个资源和模块之间的占比和关系,如下图所示:
|
|
125
125
|
|
|
126
126
|
<img
|
|
127
|
-
src="https://
|
|
127
|
+
src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/treemap.png"
|
|
128
|
+
width="500px"
|
|
129
|
+
style={{ margin: 'auto' }}
|
|
130
|
+
/>
|
|
131
|
+
|
|
132
|
+
同时可以点击卡片标题侧的 🔍 按钮,搜索 Module 资源,点击 Module 资源,可以放大到该 Module 区域,如下图所示:
|
|
133
|
+
|
|
134
|
+
<img
|
|
135
|
+
src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/treemap.gif"
|
|
128
136
|
width="500px"
|
|
129
137
|
style={{ margin: 'auto' }}
|
|
130
138
|
/>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rsdoctor/docs",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.5",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "https://github.com/web-infra-dev/rsdoctor",
|
|
@@ -20,22 +20,22 @@
|
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
22
|
"@rspress/plugin-rss": "2.0.0-beta.6",
|
|
23
|
-
"@rspress/plugin-llms": "2.0.0-beta.
|
|
24
|
-
"@rspress/plugin-algolia": "2.0.0-beta.
|
|
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
|
-
"@types/react": "^18.3.
|
|
26
|
+
"@types/react": "^18.3.23",
|
|
27
27
|
"@types/react-dom": "^18.3.7",
|
|
28
28
|
"react": "18.3.1",
|
|
29
29
|
"react-dom": "18.3.1",
|
|
30
30
|
"rsbuild-plugin-google-analytics": "^1.0.3",
|
|
31
31
|
"rsbuild-plugin-open-graph": "^1.0.2",
|
|
32
32
|
"rspress-plugin-font-open-sans": "^1.0.0",
|
|
33
|
-
"rspress-plugin-sitemap": "^1.1.
|
|
33
|
+
"rspress-plugin-sitemap": "^1.1.4",
|
|
34
34
|
"typescript": "^5.2.2",
|
|
35
|
-
"@rsdoctor/types": "1.1.
|
|
35
|
+
"@rsdoctor/types": "1.1.5"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@rstack-dev/doc-ui": "1.10.
|
|
38
|
+
"@rstack-dev/doc-ui": "1.10.6",
|
|
39
39
|
"react-markdown": "^9.1.0",
|
|
40
40
|
"rspress": "2.0.0-beta.6"
|
|
41
41
|
},
|