@rsdoctor/docs 1.3.6 → 1.3.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.
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: GitHub Action Integration
|
|
3
|
+
description: Integrate Rsdoctor analysis in CI/CD workflows using rsdoctor-action
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# GitHub Action Integration
|
|
7
|
+
|
|
8
|
+
Rsdoctor provides an official GitHub [rsdoctor-action](https://github.com/web-infra-dev/rsdoctor-action) for easy integration of Rsdoctor analysis functionality in CI/CD workflows. Through GitHub Action, you can automatically perform bundle diff analysis on the build output and monitor and prevent bundle degradation, continuously optimizing project performance.
|
|
9
|
+
|
|
10
|
+
<img
|
|
11
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/github-actions-opt.png"
|
|
12
|
+
style={{ width: '80%', margin: 'auto' }}
|
|
13
|
+
/>
|
|
14
|
+
|
|
15
|
+
## Quick Start
|
|
16
|
+
|
|
17
|
+
### Step 1: Install Rsdoctor Plugin in Your Project
|
|
18
|
+
|
|
19
|
+
**1. Follow the [Quick Start](/guide/start/quick-start) guide to install the Rsdoctor plugin in your project and configure it according to your project type.**
|
|
20
|
+
|
|
21
|
+
**2. You need to use Brief mode and add `'json'` to the `type` array so that the analysis data can be uploaded in the subsequent GitHub Action.** For detailed configuration, see [output options](/config/options/output).
|
|
22
|
+
|
|
23
|
+
- Example below, Rsbuild integration example:
|
|
24
|
+
|
|
25
|
+
```typescript
|
|
26
|
+
// rsbuild.config.ts
|
|
27
|
+
import { defineConfig } from '@rsbuild/core';
|
|
28
|
+
import { pluginReact } from '@rsbuild/plugin-react';
|
|
29
|
+
import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
|
|
30
|
+
|
|
31
|
+
export default defineConfig({
|
|
32
|
+
plugins: [pluginReact()],
|
|
33
|
+
tools: {
|
|
34
|
+
rspack: {
|
|
35
|
+
plugins: [
|
|
36
|
+
new RsdoctorRspackPlugin({
|
|
37
|
+
output: {
|
|
38
|
+
mode: 'brief',
|
|
39
|
+
options: {
|
|
40
|
+
type: ['json'],
|
|
41
|
+
},
|
|
42
|
+
},
|
|
43
|
+
}),
|
|
44
|
+
],
|
|
45
|
+
},
|
|
46
|
+
},
|
|
47
|
+
});
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### Step 2: Configure GitHub Workflow
|
|
51
|
+
|
|
52
|
+
Create a `.github/workflows/ci.yml` file in your GitHub repository as shown in the example below. Please note the following points:
|
|
53
|
+
|
|
54
|
+
- `file_path`: Required, path to the Rsdoctor JSON data file.
|
|
55
|
+
- `target_branch`: Optional, target branch name, defaults to 'main'.
|
|
56
|
+
- `on` refers to the timing of execution. It needs to run on both `pull_request` and `push`. During `pull_request`, Rsdoctor Action will pull baseline and current data for bundle diff analysis. During `push` (i.e., when PR is merged), it will perform baseline update and upload operations.
|
|
57
|
+
- Before executing rsdoctor-action, you need to build the project first. During the build process, you need to enable the Rsdoctor plugin and generate the Rsdoctor JSON data file.
|
|
58
|
+
|
|
59
|
+
```yaml
|
|
60
|
+
name: Bundle Analysis
|
|
61
|
+
|
|
62
|
+
on: [pull_request, push]
|
|
63
|
+
|
|
64
|
+
jobs:
|
|
65
|
+
bundle-analysis:
|
|
66
|
+
runs-on: ubuntu-latest
|
|
67
|
+
|
|
68
|
+
permissions:
|
|
69
|
+
# Allow commenting on commits
|
|
70
|
+
contents: write
|
|
71
|
+
# Allow commenting on issues
|
|
72
|
+
issues: write
|
|
73
|
+
# Allow commenting on pull requests
|
|
74
|
+
pull-requests: write
|
|
75
|
+
|
|
76
|
+
steps:
|
|
77
|
+
- name: Checkout
|
|
78
|
+
uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
|
|
79
|
+
with:
|
|
80
|
+
fetch-depth: 0
|
|
81
|
+
token: ${{ secrets.GITHUB_TOKEN }}
|
|
82
|
+
|
|
83
|
+
- name: Setup Pnpm
|
|
84
|
+
run: |
|
|
85
|
+
npm install -g corepack@latest --force
|
|
86
|
+
corepack enable
|
|
87
|
+
|
|
88
|
+
- name: Setup Node.js
|
|
89
|
+
uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
|
|
90
|
+
with:
|
|
91
|
+
node-version: 22
|
|
92
|
+
cache: 'pnpm'
|
|
93
|
+
|
|
94
|
+
- name: Install Dependencies and Build
|
|
95
|
+
run: |
|
|
96
|
+
pnpm install
|
|
97
|
+
pnpm run build
|
|
98
|
+
|
|
99
|
+
- name: Bundle Analysis
|
|
100
|
+
uses: web-infra-dev/rsdoctor-action@main
|
|
101
|
+
with:
|
|
102
|
+
file_path: 'dist/.rsdoctor/rsdoctor-data.json'
|
|
103
|
+
target_branch: ${{ github.ref_name }}
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
#### Configuration Options
|
|
107
|
+
|
|
108
|
+
In the above configuration:
|
|
109
|
+
|
|
110
|
+
- `file_path`: Required, path to the Rsdoctor JSON data file.
|
|
111
|
+
- `target_branch`: Optional, target branch name, defaults to 'main'.
|
|
112
|
+
|
|
113
|
+
## View Reports
|
|
114
|
+
|
|
115
|
+
After submitting the above configuration file to your repository, GitHub Actions will automatically run under the specified trigger conditions and generate Rsdoctor analysis reports. You will see bundle size change comparison prompts in GitHub CI, as shown below:
|
|
116
|
+
|
|
117
|
+
<img
|
|
118
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/github-actions-opt.png"
|
|
119
|
+
style={{ width: '80%', margin: 'auto' }}
|
|
120
|
+
/>
|
|
121
|
+
|
|
122
|
+
Additionally, clicking "Download Bundle Diff Report" allows you to download Rsdoctor's diff report for detailed diff data viewing.
|
|
123
|
+
|
|
124
|
+
<img src="https://assets.rspack.rs/others/assets/rsdoctor/bundle-diff-all.png" />
|
|
125
|
+
|
|
126
|
+
> For detailed Bundle Diff report content, see [Bundle Diff Usage Guide](/guide/usage/bundle-diff).
|
|
127
|
+
|
|
128
|
+
## Troubleshooting
|
|
129
|
+
|
|
130
|
+
### Common Issues
|
|
131
|
+
|
|
132
|
+
**Q: Action fails with "❌ Rsdoctor data file not found"**
|
|
133
|
+
|
|
134
|
+
- Ensure your build process generates Rsdoctor JSON data, the default path is `/rsdoctor-data.json`.
|
|
135
|
+
- Check if file_path points to the correct location
|
|
136
|
+
- Verify that the Rsdoctor plugin is properly configured in your build tool
|
|
137
|
+
|
|
138
|
+
**Q: If you see the message "No baseline data found", what does it mean?**
|
|
139
|
+
|
|
140
|
+
- This is normal for the first run or for new repositories, because no baseline has been uploaded yet. The baseline data will be created after the first merge into the main branch.
|
|
141
|
+
|
|
142
|
+
## More Resources
|
|
143
|
+
|
|
144
|
+
- [rsdoctor-action GitHub Repository](https://github.com/web-infra-dev/rsdoctor-action)
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: GitHub Action 集成
|
|
3
|
+
description: 使用 rsdoctor-action 在 CI/CD 流程中集成 Rsdoctor 分析
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# GitHub Action 集成
|
|
7
|
+
|
|
8
|
+
Rsdoctor 提供了官方的 GitHub [rsdoctor-action](https://github.com/web-infra-dev/rsdoctor-action) 在 CI/CD 流程中轻松集成 Rsdoctor 分析功能。通过 GitHub Action，你可以在 GitHub 上每次构建时自动对产物进行差异分析，监控并防止产物劣化，持续优化项目性能。
|
|
9
|
+
|
|
10
|
+
<img
|
|
11
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/github-actions-opt.png"
|
|
12
|
+
style={{ width: '80%', margin: 'auto' }}
|
|
13
|
+
/>
|
|
14
|
+
|
|
15
|
+
## 快速开始
|
|
16
|
+
|
|
17
|
+
### 第一步：项目中安装 Rsdoctor 插件
|
|
18
|
+
|
|
19
|
+
**1. 项目中参考 [快速开始](/guide/start/quick-start) 安装 Rsdoctor 插件，同时按照项目类型进行配置。**
|
|
20
|
+
|
|
21
|
+
**2. 需要使用 Brief 模式，同时在 `type` 数组中添加 `'json'`，用于后续 GitHub Action 中上传分析数据。** 具体配置可查看 [output 配置](/config/options/output)。
|
|
22
|
+
|
|
23
|
+
- 示例如下，Rsbuild 集成示例：
|
|
24
|
+
|
|
25
|
+
```typescript
|
|
26
|
+
// rsbuild.config.ts
|
|
27
|
+
import { defineConfig } from '@rsbuild/core';
|
|
28
|
+
import { pluginReact } from '@rsbuild/plugin-react';
|
|
29
|
+
import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
|
|
30
|
+
|
|
31
|
+
export default defineConfig({
|
|
32
|
+
plugins: [pluginReact()],
|
|
33
|
+
tools: {
|
|
34
|
+
rspack: {
|
|
35
|
+
plugins: [
|
|
36
|
+
new RsdoctorRspackPlugin({
|
|
37
|
+
output: {
|
|
38
|
+
mode: 'brief',
|
|
39
|
+
options: {
|
|
40
|
+
type: ['json'],
|
|
41
|
+
},
|
|
42
|
+
},
|
|
43
|
+
}),
|
|
44
|
+
],
|
|
45
|
+
},
|
|
46
|
+
},
|
|
47
|
+
});
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### 第二步： GitHub workflow 中配置
|
|
51
|
+
|
|
52
|
+
在你的 GitHub 仓库中创建 `.github/workflows/ci.yml` 文件，如下示例。需要注意以下几点：
|
|
53
|
+
|
|
54
|
+
- `file_path`：必需，Rsdoctor JSON 数据文件路径。
|
|
55
|
+
- `target_branch`：非必需，目标分支名称，默认是 'main'。
|
|
56
|
+
- `on` 是指 workflow 运行的时机，通常设置为 `pull_request` 和 `push`。
|
|
57
|
+
- 在 `pull_request` 时，Rsdoctor Action 会拉取 baseline 和 current，进行 bundle diff 分析。
|
|
58
|
+
- 在 `push`（即 PR 合并）时，会进行 baseline 的更新和上传操作。
|
|
59
|
+
- 在执行 rsdoctor-action 之前，需要先将项目进行构建，构建时需要开启 Rsdoctor 插件，并生成 Rsdoctor JSON 数据文件。
|
|
60
|
+
|
|
61
|
+
```yaml
|
|
62
|
+
name: Bundle Analysis
|
|
63
|
+
|
|
64
|
+
on: [pull_request, push]
|
|
65
|
+
|
|
66
|
+
jobs:
|
|
67
|
+
bundle-analysis:
|
|
68
|
+
runs-on: ubuntu-latest
|
|
69
|
+
|
|
70
|
+
permissions:
|
|
71
|
+
# Allow commenting on commits
|
|
72
|
+
contents: write
|
|
73
|
+
# Allow commenting on issues
|
|
74
|
+
issues: write
|
|
75
|
+
# Allow commenting on pull requests
|
|
76
|
+
pull-requests: write
|
|
77
|
+
|
|
78
|
+
steps:
|
|
79
|
+
- name: Checkout
|
|
80
|
+
uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
|
|
81
|
+
with:
|
|
82
|
+
fetch-depth: 0
|
|
83
|
+
token: ${{ secrets.GITHUB_TOKEN }}
|
|
84
|
+
|
|
85
|
+
- name: Setup Pnpm
|
|
86
|
+
run: |
|
|
87
|
+
npm install -g corepack@latest --force
|
|
88
|
+
corepack enable
|
|
89
|
+
|
|
90
|
+
- name: Setup Node.js
|
|
91
|
+
uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
|
|
92
|
+
with:
|
|
93
|
+
node-version: 22
|
|
94
|
+
cache: 'pnpm'
|
|
95
|
+
|
|
96
|
+
- name: Install Dependencies and Build
|
|
97
|
+
run: |
|
|
98
|
+
pnpm install
|
|
99
|
+
pnpm run build
|
|
100
|
+
|
|
101
|
+
- name: Bundle Analysis
|
|
102
|
+
uses: web-infra-dev/rsdoctor-action@main
|
|
103
|
+
with:
|
|
104
|
+
file_path: 'dist/.rsdoctor/rsdoctor-data.json'
|
|
105
|
+
target_branch: ${{ github.ref_name }}
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
## 查看报告
|
|
109
|
+
|
|
110
|
+
将上述配置文件提交到你的仓库后，GitHub Actions 将在指定的触发条件下自动运行，生成 Rsdoctor 的分析报告。你将在 GitHub CI 中看到 Bundle 大小变化的对比提示，如下图：
|
|
111
|
+
|
|
112
|
+
<img
|
|
113
|
+
src="https://assets.rspack.rs/others/assets/rsdoctor/github-actions-opt.png"
|
|
114
|
+
style={{ width: '80%', margin: 'auto' }}
|
|
115
|
+
/>
|
|
116
|
+
|
|
117
|
+
同时，点击 「Download Bundle Diff Report」可以下载 Rsdoctor 的 diff 报告，详细查看 diff 数据。
|
|
118
|
+
|
|
119
|
+
<img src="https://assets.rspack.rs/others/assets/rsdoctor/bundle-diff-all.png" />
|
|
120
|
+
|
|
121
|
+
> Bundle Diff 报告详细内容可查看 [Bundle Diff 使用指南](/guide/usage/bundle-diff)。
|
|
122
|
+
|
|
123
|
+
## 故障排除
|
|
124
|
+
|
|
125
|
+
### 常见问题
|
|
126
|
+
|
|
127
|
+
**Q: Action 失败，提示 "❌ Rsdoctor data file not found"**
|
|
128
|
+
|
|
129
|
+
- 确保构建过程生成 Rsdoctor JSON 数据，默认是 `/rsdoctor-data.json`。
|
|
130
|
+
- 检查 file_path 是否指向正确位置
|
|
131
|
+
- 验证 Rsdoctor 插件在您的构建工具中正确配置
|
|
132
|
+
|
|
133
|
+
**Q: 如果提示 "No baseline data found"，是什么原因？**
|
|
134
|
+
|
|
135
|
+
- 这对于首次运行或新仓库是正常的，因为还没有上传 Baseline。因为基线数据将在首次合并到主分支后创建。
|
|
136
|
+
|
|
137
|
+
## 更多资源
|
|
138
|
+
|
|
139
|
+
- [rsdoctor-action GitHub 仓库](https://github.com/web-infra-dev/rsdoctor-action)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rsdoctor/docs",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.7-beta.0",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "https://github.com/web-infra-dev/rsdoctor",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"rspress-plugin-sitemap": "^1.2.1",
|
|
34
34
|
"typescript": "^5.9.2",
|
|
35
35
|
"@rsbuild/plugin-sass": "^1.4.0",
|
|
36
|
-
"@rsdoctor/types": "1.3.
|
|
36
|
+
"@rsdoctor/types": "1.3.7-beta.0"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@rstack-dev/doc-ui": "1.11.0",
|