Skip to content

Commit

Permalink
chore(docs): add brief mode documents (#488)
Browse files Browse the repository at this point in the history
  • Loading branch information
easy1090 authored Aug 30, 2024
1 parent b1aea99 commit 828a059
Show file tree
Hide file tree
Showing 12 changed files with 289 additions and 73 deletions.
21 changes: 11 additions & 10 deletions packages/document/docs/en/config/options/options-shared.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,17 @@ Whether to automatically open the Rsdoctor report page. If you do not need to vi

#### features values

The `features` attribute is used to analyze the function switches, and the specific functional items are as follows:

- **loader**: Analysis of Loader time consumption and code compilation changes, enabled by default.
- **plugins**: Analysis of Plugins calls and time consumption, enabled by default.
- **bundle**: Analysis of build artifacts, enabled by default.
- **resolver**: resolver analysis, disabled by default.
- **lite**: [**depracated, please use [mode.lite](#mode)**]
lite mode. The difference between lite mode and normal mode is that source code information is no longer cached, only packaged code information is cached, so the code analyzed on the page will also be packaged. The default is normal mode.

Therefore, **the default configuration enables bundle analysis capabilities and Loader and Plugin build-time analysis**. The Resolver analysis capability is not enabled, and Rspack does not currently support Resolver analysis capabilities.

:::tip

**If an "out of memory" error occurs, you can try the following:**
Expand All @@ -35,16 +46,6 @@ Whether to automatically open the Rsdoctor report page. If you do not need to vi

:::

The `features` attribute is used to analyze the function switches, and the specific functional items are as follows:

- **loader**: Analysis of Loader time consumption and code compilation changes, enabled by default.
- **plugins**: Analysis of Plugins calls and time consumption, enabled by default.
- **bundle**: Analysis of build artifacts, enabled by default.
- **resolver**: resolver analysis, disabled by default.
- **lite**: lite mode. The difference between lite mode and normal mode is that source code information is no longer cached, only packaged code information is cached, so the code analyzed on the page will also be packaged. The default is normal mode.

Therefore, **the default configuration enables bundle analysis capabilities and Loader and Plugin build-time analysis**. The Resolver analysis capability is not enabled, and Rspack does not currently support Resolver analysis capabilities.

#### features types

- if the `features` is set as an `Array`, it will **open** the features which you define in this array **only**.
Expand Down
112 changes: 74 additions & 38 deletions packages/document/docs/en/config/options/options.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -91,75 +91,111 @@ Whether to automatically open the Rsdoctor report page. If you do not need to vi

#### features values

The `features` attribute is used to analyze the function switches, and the specific functional items are as follows:

- **loader**: Analysis of Loader time consumption and code compilation changes, enabled by default.
- **plugins**: Analysis of Plugins calls and time consumption, enabled by default.
- **bundle**: Analysis of build bundles, enabled by default.
- **resolver**: resolver analysis, disabled by default.
- **lite**: [**depracated, please use [mode.lite](#mode)**]
lite mode. The difference between lite mode and normal mode is that source code information is no longer cached, only packaged code information is cached, so the code analyzed on the page will also be packaged. The default is normal mode.

Therefore, **the default configuration enables bundle analysis capabilities and Loader and Plugin build-time analysis**. The Resolver analysis capability is not enabled, and Rspack does not currently support Resolver analysis capabilities.

:::tip

**If an "out of memory" error occurs, you can try the following:**

1. Open the **lite** mode
1. Open the **lite** mode.[mode.lite](#mode)
2. Increase the node memory limit, for example: NODE_OPTIONS=--max-old-space-size=8096.

- Reason: During the build process, source code information is cached, which exceeds memory. Therefore, enabling the **"lite" mode** can help alleviate the problem.
- Difference: The difference between the "lite" mode and the normal mode is that source code information is no longer cached, only packaged code information is cached. Thus, the code analyzed on the page will also only be packaged.

:::

The `features` attribute is used to analyze the function switches, and the specific functional items are as follows:

- **loader**: Analysis of Loader time consumption and code compilation changes, enabled by default.
- **plugins**: Analysis of Plugins calls and time consumption, enabled by default.
- **bundle**: Analysis of build artifacts, enabled by default.
- **resolver**: resolver analysis, disabled by default.
- **lite**: lite mode. The difference between lite mode and normal mode is that source code information is no longer cached, only packaged code information is cached, so the code analyzed on the page will also be packaged. The default is normal mode.

Therefore, **the default configuration enables bundle analysis capabilities and Loader and Plugin build-time analysis**. The Resolver analysis capability is not enabled, and Rspack does not currently support Resolver analysis capabilities.

#### features types

- if the `features` is set as an `Array`, it will **open** the features which you define in this array **only**.
- if the `features` is set as an `Object`, it will **close** the features which you set the value is `false`.

### reportCodeType
#### RsdoctorWebpackPluginFeatures

- Type: `{ noModuleSource?: boolean; noAssetsAndModuleSource?: boolean }`
- Optional: true
- Default: undefined
- Description
`features` type:

- Select the output analysis data:
import Features from '@en/shared/features.md';

- undefined is all complete data;
<Features />

- noModuleSource: true is the output of data other than module code; Module code is the packaged module code of a file disassembled in the Bundle.
#### RsdoctorRspackPluginFeatures

- noAssetsAndModuleSource: true is the output of data other than module code and Assets product code.
`features` type:

- Example
import FeaturesRspack from '@en/shared/features-rspack.md';

```js
new WebDoctorWebpackPlugin({
disableClientServer: false, // It is recommended to disable the server capability in the CI environment, otherwise it will block the pipeline process. You can check the CI environment using `process.env.CI_ACTOR`.
features: ['loader', 'bundle', 'plugins'],
reportCodeType: { noModuleSource: true } // { noAssetsAndModuleSource: true }
}),
<FeaturesRspack />

### mode

- **Type:** `normal | brief | lite`
- **Optional:** `true`
- **Default:** `normal`

Choose the Rsdoctor build report mode to use, which includes the following options:

- normal: Normal mode, which generates a '.rsdoctor' folder in the build output directory. It contains different data files and the report page displays code. The output directory can be configured using [reportDir](#reportdir).
- brief: Brief mode, which generates an HTML report file in the `.rsdoctor` folder of the build output directory. You can open this HTML file in a browser to view the report. Brief mode also has additional configuration options, see [brief](#brief).
- lite: Lite mode, which is a mode based on normal mode that does not display source code and bundles codes. It only displays information about the built codes.

### reportDir

- **Type:** string
- **Optional:** `true`
- **Default:** undefined

The output directory for Rsdoctor reports. By default, it is the build output directory.

### brief

- **Type:** [BriefType](#brieftype)
- **Optional:** `true`
- **Default:** undefined

More configurations for Brief mode are as follows:

- **reportHtmlName:** Configures the name of the HTML report for Brief mode. The default value is `report-rsdoctor.html`.
- **writeDataJson:** By default, in Brief mode, the analysis data is injected into the HTML file, so no additional build analysis data is generated. If you want to generate additional local data, you need to configure `writeDataJson: true`.

#### briefType

```ts
interface BriefConfig {
reportHtmlName?: string | undefined;
writeDataJson: boolean;
}
```

### disableTOSUpload
### reportCodeType

- Type: boolean
- Type: `{ noModuleSource?: boolean; noAssetsAndModuleSource?: boolean }`
- Optional: true
- Default: false
- Default: undefined
- Description

Turn tos upload on or off. True is to turn off tos upload, and false is tos upload on.
- Select the output analysis data:

- default is all complete data;

- noModuleSource: true is the output of data other than module code; Module code is the packaged module code of a file disassembled in the Bundle.

- noAssetsAndModuleSource: true is the output of data other than module code and Assets product code.

- Example

```js
new WebDoctorWebpackPlugin({
disableClientServer: false, // It is recommended to disable the server capability in the CI environment, otherwise it will block the pipeline process. You can check the CI environment using `process.env.CI_ACTOR`.
features: ['loader', 'bundle', 'plugins'],
disableTOSUpload: true,
}),
new RsdoctorRspackPlugin({
reportCodeType: { noModuleSource: true } // { noAssetsAndModuleSource: true }
}),
```

### supports
Expand Down Expand Up @@ -215,14 +251,14 @@ Disabling the Parse Bundle capability will only affect the visibility of the Bun
<img
src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundled-size.jpeg"
height="300px"
width="400px"
width="300px"
style={{ margin: 'auto' }}
/>

<img
src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/bundled-code.png"
height="300px"
width="500px"
width="400px"
style={{ margin: 'auto' }}
/>
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/document/docs/en/guide/start/_meta.json
Original file line number Diff line number Diff line change
@@ -1 +1 @@
["intro", "quick-start", "features", "cli"]
["intro", "quick-start", "features", "cicd", "cli"]
30 changes: 30 additions & 0 deletions packages/document/docs/en/guide/start/cicd.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
# CI/CD Tutorial

In CI/CD, there is often a desire to upload historical reports to the CDN as historical records. Because it's not convenient to achieve instant use in the standard mode, the **Brief** mode is supported.

## Brief Mode

In Brief mode, data reports are integrated into a single HTML page, making it easy for users to view historical build data in a summary form within CI/CD and other scenarios.

### Enabling Brief Mode

You can enable Brief mode by configuring the `mode.brief` option in the Rsdoctor plugin. After the build, Brief mode will generate a report in the build output directory: `[outputDir]/.rsdoctor/report-rsdoctor.html`. You can view the build analysis summary by opening the HTML file in a browser.

- In Brief mode, no code data is displayed to prevent the page from crashing due to large data sizes.
- The report output directory and file name can be configured. Refer to: [Options](/config/options/options#brief).
- For more configurations, refer to: [Options](/config/options/options#brief).

```ts title="rspack.config.js"
const { RsdoctorRspackPlugin } = require('@rsdoctor/rspack-plugin');

module.exports = {
// ...
plugins: [
process.env.RSDOCTOR &&
new RsdoctorRspackPlugin({
// other options
mode: 'brief',
}),
].filter(Boolean),
};
```
25 changes: 25 additions & 0 deletions packages/document/docs/en/shared/features-rspack.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
```ts
interface RsdoctorRspackPluginFeatures {
/**
* turn off it if you need not to analyze the executions of webpack loaders.
* @default true
*/
loader?: boolean;
/**
* turn off it if you need not to analyze the executions of webpack plugins.
* @default true
*/
plugins?: boolean;
/**
* turn off it if you need not to analyze the output bundle.
* @default true
*/
bundle?: boolean;
/**
* turn on it if you just use lite mode. This mode do not have source codes.
* @default false
* @deprecated
*/
lite?: boolean;
}
```
30 changes: 30 additions & 0 deletions packages/document/docs/en/shared/features.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
```ts
interface RsdoctorWebpackPluginFeatures {
/**
* turn off it if you need not to analyze the executions of webpack loaders.
* @default true
*/
loader?: boolean;
/**
* turn off it if you need not to analyze the executions of webpack plugins.
* @default true
*/
plugins?: boolean;
/**
* turn off it if you need not to analyze the executions of resolver.
* @default false
*/
resolver?: boolean;
/**
* turn off it if you need not to analyze the output bundle.
* @default true
*/
bundle?: boolean;
/**
* turn on it if you just use lite mode. This mode do not have source codes.
* @default false
* @deprecated
*/
lite?: boolean;
}
```
20 changes: 10 additions & 10 deletions packages/document/docs/zh/config/options/options-shared.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,16 @@

#### features values

features 属性是用于分析功能开关的,具体的功能项如下:

- **loader**:Loaders 耗时及代码编译变化分析,默认开启。
- **plugins**:Plugins 调用以及耗时分析,默认开启。
- **bundle**:构建产物分析,默认开启。
- **resolver**:resolver 分析,默认关闭。
- **lite**: **(废弃,参考:[mode.lite]())** lite 模式。lite 模式和普通模式的区别就是不再缓存源码信息,只缓存打包后的代码信息,这样分析页面上的代码也将是打包后的。默认普通模式。

所以,**默认配置是开启了 Bundle 分析能力、 Loader he Plugin 构建时分析**。没有开启 Resolver 分析能力, Rspack 暂不支持 Resolver 分析能力。

:::tip
**如果出现了 out of memory 的报错,可以尝试:**

Expand All @@ -38,16 +48,6 @@

:::

features 属性是用于分析功能开关的,具体的功能项如下:

- **loader**:Loaders 耗时及代码编译变化分析,默认开启。
- **plugins**:Plugins 调用以及耗时分析,默认开启。
- **bundle**:构建产物分析,默认开启。
- **resolver**:resolver 分析,默认关闭。
- **lite**: lite 模式。lite 模式和普通模式的区别就是不再缓存源码信息,只缓存打包后的代码信息,这样分析页面上的代码也将是打包后的。默认普通模式。

所以,**默认配置是开启了 Bundle 分析能力、 Loader he Plugin 构建时分析**。没有开启 Resolver 分析能力, Rspack 暂不支持 Resolver 分析能力。

#### features types

- 如果你将 `features` 设置为**数组**类型,该插件**只会开启**你在 `features` 数组中定义的功能。
Expand Down
Loading

0 comments on commit 828a059

Please sign in to comment.