@rsdoctor/docs 1.0.2-beta.0 → 1.0.2
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.
|
@@ -48,7 +48,7 @@ module.exports = {
|
|
|
48
48
|
|
|
49
49
|
- **Options:** The plugin provides some configurations, please refer to [Options](../../config/options/options).
|
|
50
50
|
|
|
51
|
-
### Modern.js
|
|
51
|
+
### Modern.js
|
|
52
52
|
|
|
53
53
|
Initialize the plugin in the [tools.rspack](https://modernjs.dev/configure/app/tools/rspack) of `modern.config.ts`:
|
|
54
54
|
|
|
@@ -78,9 +78,51 @@ export default {
|
|
|
78
78
|
For projects using Modern.js's webpack mode, please register the `RsdoctorWebpackPlugin` plugin through [tools.webpack](https://modernjs.dev/configure/app/tools/webpack).
|
|
79
79
|
:::
|
|
80
80
|
|
|
81
|
-
### Next.js
|
|
81
|
+
### Next.js
|
|
82
82
|
|
|
83
|
-
|
|
83
|
+
#### Step 1: Register the Rsdoctor plugin
|
|
84
|
+
|
|
85
|
+
Initialize the [RsdoctorRspackPlugin](#rspack-projects)([RsdoctorWebpackPlugin](#webpack-projects)) plugin in the [Rspack Config](https://rspack.dev/guide/tech/next)([webpack config](https://nextjs.org/docs/pages/api-reference/config/next-config-js/webpack)) of `next.config.ts`.
|
|
86
|
+
|
|
87
|
+
import { Tab, Tabs } from 'rspress/theme';
|
|
88
|
+
|
|
89
|
+
<Tabs>
|
|
90
|
+
|
|
91
|
+
<Tab label="Rspack">
|
|
92
|
+
|
|
93
|
+
```ts title="next.config.ts"
|
|
94
|
+
import type { NextConfig } from 'next';
|
|
95
|
+
import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
|
|
96
|
+
|
|
97
|
+
const nextConfig: NextConfig = {
|
|
98
|
+
/* config options here */
|
|
99
|
+
webpack: (config) => {
|
|
100
|
+
if (config.name === 'client') {
|
|
101
|
+
config.plugins.push(
|
|
102
|
+
new RsdoctorRspackPlugin({
|
|
103
|
+
disableClientServer: true,
|
|
104
|
+
}),
|
|
105
|
+
);
|
|
106
|
+
} else if (config.name === 'server') {
|
|
107
|
+
config.plugins.push(
|
|
108
|
+
new RsdoctorRspackPlugin({
|
|
109
|
+
disableClientServer: true,
|
|
110
|
+
output: {
|
|
111
|
+
reportDir: './.next/server',
|
|
112
|
+
},
|
|
113
|
+
}),
|
|
114
|
+
);
|
|
115
|
+
}
|
|
116
|
+
return config;
|
|
117
|
+
},
|
|
118
|
+
};
|
|
119
|
+
|
|
120
|
+
export default nextConfig;
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
</Tab>
|
|
124
|
+
|
|
125
|
+
<Tab label="webpack">
|
|
84
126
|
|
|
85
127
|
```ts title="next.config.ts"
|
|
86
128
|
import type { NextConfig } from 'next';
|
|
@@ -112,28 +154,37 @@ const nextConfig: NextConfig = {
|
|
|
112
154
|
export default nextConfig;
|
|
113
155
|
```
|
|
114
156
|
|
|
115
|
-
|
|
157
|
+
</Tab>
|
|
158
|
+
</Tabs>
|
|
116
159
|
|
|
117
|
-
|
|
160
|
+
- **Options:** The plugin provides some configuration options, please refer to [Options](../../config/options/options).
|
|
118
161
|
|
|
119
|
-
|
|
162
|
+
#### Step 2: Execute build
|
|
120
163
|
|
|
121
|
-
|
|
164
|
+
Execute the **build** command, Rsdoctor will generate the corresponding report data in the local repository artifacts.
|
|
122
165
|
|
|
123
166
|
import { PackageManagerTabs } from '@theme';
|
|
124
167
|
|
|
125
|
-
<PackageManagerTabs command="
|
|
168
|
+
<PackageManagerTabs command="run build" />
|
|
126
169
|
|
|
127
|
-
|
|
170
|
+
#### Step 3: Open the report
|
|
171
|
+
|
|
172
|
+
After installing [@rsdoctor/cli](/guide/start/cli), add the following scripts commands to **package.json**, executing **client:rsd** or **server:rsd** can open the report of the corresponding builder:
|
|
173
|
+
|
|
174
|
+
<PackageManagerTabs command="add @rsdoctor/cli -D" />
|
|
128
175
|
|
|
129
176
|
```ts
|
|
130
177
|
"scripts": {
|
|
131
|
-
"client:
|
|
132
|
-
"server:
|
|
178
|
+
"client:rsd": "rsdoctor analyze --profile .next/.rsdoctor/manifest.json", // Rsdoctor's client report
|
|
179
|
+
"server:rsd": "rsdoctor analyze --profile .next/server/.rsdoctor/manifest.json" // Rsdoctor's server report
|
|
133
180
|
}
|
|
134
181
|
```
|
|
135
182
|
|
|
136
|
-
|
|
183
|
+
#### 📢 Note for Next.js
|
|
184
|
+
|
|
185
|
+
After Next.js finishes executing the `build` command, it will terminate the terminal service, causing the report page server run by Rsdoctor during the build process to close. To solve this problem, you can use [@rsdoctor/cli](/guide/start/cli) to reopen the report page without re-executing the build operation. The specific method is shown in the [third step](#step-3-open-the-report) or by locally executing the rsdoctor command:
|
|
186
|
+
|
|
187
|
+
For example, if Rsdoctor's build output is located at the path `.next/server/chunks/.rsdoctor/manifest.json`, you can open the report page by executing the following command:
|
|
137
188
|
|
|
138
189
|
```bash
|
|
139
190
|
rsdoctor analyze --profile .next/server/chunks/.rsdoctor/manifest.json
|
|
@@ -170,7 +221,7 @@ export default defineConfig({
|
|
|
170
221
|
|
|
171
222
|
---
|
|
172
223
|
|
|
173
|
-
## Step 3:
|
|
224
|
+
## Step 3: Execute build
|
|
174
225
|
|
|
175
226
|
Now, you can run the **build** command in the project. After the build is complete, Rsdoctor will automatically open the analysis page of this build.
|
|
176
227
|
|
|
@@ -80,7 +80,48 @@ export default {
|
|
|
80
80
|
|
|
81
81
|
### Next.js 项目
|
|
82
82
|
|
|
83
|
-
|
|
83
|
+
#### 第一步：注册 Rsdoctor 插件
|
|
84
|
+
|
|
85
|
+
在 `next.config.ts` 的 [Rspack 配置](https://rspack.dev/guide/tech/next)([webpack 配置](https://nextjs.org/docs/pages/api-reference/config/next-config-js/webpack)) 中初始化 [RsdoctorRspackPlugin](#rspack-%E9%A1%B9%E7%9B%AE)（[RsdoctorWebpackPlugin](#webpack-%E9%A1%B9%E7%9B%AE)） 插件。
|
|
86
|
+
|
|
87
|
+
import { Tab, Tabs } from 'rspress/theme';
|
|
88
|
+
|
|
89
|
+
<Tabs>
|
|
90
|
+
<Tab label="Rspack">
|
|
91
|
+
|
|
92
|
+
```ts title="next.config.ts"
|
|
93
|
+
import type { NextConfig } from 'next';
|
|
94
|
+
import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
|
|
95
|
+
|
|
96
|
+
const nextConfig: NextConfig = {
|
|
97
|
+
/* config options here */
|
|
98
|
+
webpack: (config) => {
|
|
99
|
+
if (config.name === 'client') {
|
|
100
|
+
config.plugins.push(
|
|
101
|
+
new RsdoctorRspackPlugin({
|
|
102
|
+
disableClientServer: true,
|
|
103
|
+
}),
|
|
104
|
+
);
|
|
105
|
+
} else if (config.name === 'server') {
|
|
106
|
+
config.plugins.push(
|
|
107
|
+
new RsdoctorRspackPlugin({
|
|
108
|
+
disableClientServer: true,
|
|
109
|
+
output: {
|
|
110
|
+
reportDir: './.next/server',
|
|
111
|
+
},
|
|
112
|
+
}),
|
|
113
|
+
);
|
|
114
|
+
}
|
|
115
|
+
return config;
|
|
116
|
+
},
|
|
117
|
+
};
|
|
118
|
+
|
|
119
|
+
export default nextConfig;
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
</Tab>
|
|
123
|
+
|
|
124
|
+
<Tab label="webpack">
|
|
84
125
|
|
|
85
126
|
```ts title="next.config.ts"
|
|
86
127
|
import type { NextConfig } from 'next';
|
|
@@ -112,28 +153,37 @@ const nextConfig: NextConfig = {
|
|
|
112
153
|
export default nextConfig;
|
|
113
154
|
```
|
|
114
155
|
|
|
115
|
-
|
|
156
|
+
</Tab>
|
|
157
|
+
</Tabs>
|
|
116
158
|
|
|
117
|
-
|
|
159
|
+
- **Options:** 插件提供了一些配置项，请参考 [Options](../../config/options/options)。
|
|
118
160
|
|
|
119
|
-
|
|
161
|
+
#### 第二步：执行构建
|
|
120
162
|
|
|
121
|
-
|
|
163
|
+
执行 **build** 命令，Rsdoctor 会在本地仓库产物中生成对应的报告数据。
|
|
122
164
|
|
|
123
165
|
import { PackageManagerTabs } from '@theme';
|
|
124
166
|
|
|
125
|
-
<PackageManagerTabs command="
|
|
167
|
+
<PackageManagerTabs command="run build" />
|
|
168
|
+
|
|
169
|
+
#### 第三步：打开报告
|
|
126
170
|
|
|
127
|
-
|
|
171
|
+
安装 [@rsdoctor/cli](/guide/start/cli) 后，**package.json** 里添加如下 scripts 命令，执行 **client:rsd** 或者 **server:rsd** 可打开对应构建器的报告：
|
|
172
|
+
|
|
173
|
+
<PackageManagerTabs command="add @rsdoctor/cli -D" />
|
|
128
174
|
|
|
129
175
|
```ts
|
|
130
176
|
"scripts": {
|
|
131
|
-
"client:
|
|
132
|
-
"server:
|
|
177
|
+
"client:rsd": "rsdoctor analyze --profile .next/.rsdoctor/manifest.json", // Rsdoctor's client report path
|
|
178
|
+
"server:rsd": "rsdoctor analyze --profile .next/server/.rsdoctor/manifest.json" // Rsdoctor's server report path
|
|
133
179
|
}
|
|
134
180
|
```
|
|
135
181
|
|
|
136
|
-
|
|
182
|
+
#### 📢 Next.js 项目使用注意
|
|
183
|
+
|
|
184
|
+
Next.js 在 `build` 执行结束后会终止终端服务，导致 Rsdoctor 在构建过程中运行的报告页面服务器关闭。为解决此问题，你可以使用 [@rsdoctor/cli](/guide/start/cli) 重新打开报告页面，无需重新执行构建操作。具体方法见[第三步](#%E7%AC%AC%E4%B8%89%E6%AD%A5%E6%89%93%E5%BC%80%E6%8A%A5%E5%91%8A)或本地执行 rsdoctor 命令：
|
|
185
|
+
|
|
186
|
+
例如 Rsdoctor 的构建产物在 `.next/server/chunks/.rsdoctor/manifest.json` 路径，则可通过执行下面命令来打开报告页面：
|
|
137
187
|
|
|
138
188
|
```bash
|
|
139
189
|
rsdoctor analyze --profile .next/server/chunks/.rsdoctor/manifest.json
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rsdoctor/docs",
|
|
3
|
-
"version": "1.0.2
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "https://github.com/web-infra-dev/rsdoctor",
|
|
@@ -19,10 +19,10 @@
|
|
|
19
19
|
"registry": "https://registry.npmjs.org/"
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
|
-
"@rspress/plugin-rss": "2.0.0-alpha.
|
|
22
|
+
"@rspress/plugin-rss": "2.0.0-alpha.11",
|
|
23
23
|
"@types/node": "^16",
|
|
24
24
|
"@types/react": "^18.3.20",
|
|
25
|
-
"@types/react-dom": "^18.3.
|
|
25
|
+
"@types/react-dom": "^18.3.6",
|
|
26
26
|
"react": "18.3.1",
|
|
27
27
|
"react-dom": "18.3.1",
|
|
28
28
|
"rsbuild-plugin-google-analytics": "^1.0.3",
|
|
@@ -30,12 +30,12 @@
|
|
|
30
30
|
"rspress-plugin-font-open-sans": "^1.0.0",
|
|
31
31
|
"rspress-plugin-sitemap": "^1.1.1",
|
|
32
32
|
"typescript": "^5.2.2",
|
|
33
|
-
"@rsdoctor/types": "1.0.2
|
|
33
|
+
"@rsdoctor/types": "1.0.2"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@rstack-dev/doc-ui": "1.7.
|
|
36
|
+
"@rstack-dev/doc-ui": "1.7.4",
|
|
37
37
|
"react-markdown": "^9.1.0",
|
|
38
|
-
"rspress": "2.0.0-alpha.
|
|
38
|
+
"rspress": "2.0.0-alpha.11"
|
|
39
39
|
},
|
|
40
40
|
"scripts": {
|
|
41
41
|
"dev": "rspress dev",
|