Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions website/docs/en/config/log-level.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,19 @@
- **Default:** `'info'`
- **Version:** `>= 1.4.0`

Specify the log level of Rsbuild, the default value is `info`.
Sets the Rsbuild log level. Defaults to `info`.

## Example

Set `logLevel` to `warn` and Rsbuild will only output `warn` and `error` level logs:
When `logLevel` is set to `warn`, Rsbuild only outputs warning and error logs:

```ts title="rsbuild.config.ts"
export default {
logLevel: 'warn',
};
```

Set `logLevel` to `error` and Rsbuild will only output `error` level logs:
When `logLevel` is set to `error`, Rsbuild only outputs error logs:

```ts title="rsbuild.config.ts"
export default {
Expand All @@ -26,15 +26,15 @@ export default {

## Optional values

- `info`: Output all logs
- `warn`: Output `warn` and `error` level logs
- `error`: Output `error` level logs
- `silent`: Do not output any logs
- `info`: Output all logs.
- `warn`: Output warning and error logs.
- `error`: Output error logs.
- `silent`: Do not output any logs.

::: note
When in [Debug mode](/guide/debug/debug-mode), all logs are always output.
In [debug mode](/guide/debug/debug-mode), Rsbuild always outputs all logs.
:::

## Limitations

Currently, you cannot set different log levels for each Rsbuild instance, because Rsbuild has a global shared [logger](/api/javascript-api/core#logger) instance, and all Rsbuild instances will share this logger instance.
Rsbuild currently cannot set different log levels per instance because all instances share a global [logger](/api/javascript-api/core#logger).
18 changes: 9 additions & 9 deletions website/docs/en/config/mode.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@
- **Type:** `'production' | 'development' | 'none'`
- **Version:** `>= 1.0.0`

Specify the build mode for Rsbuild, as each mode has different default behavior and optimizations. For example, the `production` mode will minify code by default.
Sets the Rsbuild build mode. Each mode applies different defaults and optimizations; for example, `production` minifies code by default.

The value of Rsbuild `mode` is also passed to the [mode](https://rspack.rs/config/mode) configuration of Rspack.
The Rsbuild `mode` value is also passed to Rspack's [mode](https://rspack.rs/config/mode) configuration.

:::tip
The value of `mode` does not affect the loading results of the `.env` file, as the `.env` file is resolved before the Rsbuild configuration file.
The `mode` value does not change which `.env` file loads because `.env` files resolve before the Rsbuild config file.

Rsbuild CLI supports using the `--env-mode` option to specify the env mode. See ["Env mode"](/guide/advanced/env-vars#env-mode) for more details.
Use the `--env-mode` option in the Rsbuild CLI to specify the env mode. See ["Env mode"](/guide/advanced/env-vars#env-mode) for details.
:::

## Default values
Expand All @@ -31,14 +31,14 @@ export default {

### Command line

When using Rsbuild's command line:
When using the Rsbuild CLI:

- `rsbuild dev` will set the default values of `NODE_ENV` and `mode` to `development`.
- `rsbuild build` and `rsbuild preview` will set the default values of `NODE_ENV` and `mode` to `production`.

### JavaScript API

When using Rsbuild's JavaScript API:
When using the Rsbuild JavaScript API:

- [rsbuild.startDevServer](/api/javascript-api/instance#rsbuildstartdevserver) and [rsbuild.createDevServer](/api/javascript-api/instance#rsbuildcreatedevserver) will set the default values of `NODE_ENV` and `mode` to `development`.
- [rsbuild.build](/api/javascript-api/instance#rsbuildbuild) and [rsbuild.preview](/api/javascript-api/instance#rsbuildpreview) will set the default values of `NODE_ENV` and `mode` to `production`.
Expand All @@ -61,9 +61,9 @@ If `mode` is `production`:

- Enable JavaScript code minification and register the [SwcJsMinimizerRspackPlugin](https://rspack.rs/plugins/rspack/swc-js-minimizer-rspack-plugin).
- Enable CSS code minification and register the [LightningCssMinimizerRspackPlugin](https://rspack.rs/plugins/rspack/lightning-css-minimizer-rspack-plugin).
- Generated JavaScript and CSS filenames will have hash suffixes, see [output.filenameHash](/config/output/filename-hash).
- Generated CSS Modules classnames will be shorter, see [cssModules.localIdentName](/config/output/css-modules#cssmoduleslocalidentname).
- Do not generate JavaScript and CSS source maps, see [output.sourceMap](/config/output/source-map).
- JavaScript and CSS filenames include hash suffixes. See [output.filenameHash](/config/output/filename-hash).
- CSS Modules class names are shorter. See [cssModules.localIdentName](/config/output/css-modules#cssmoduleslocalidentname).
- JavaScript and CSS source maps are disabled. See [output.sourceMap](/config/output/source-map).
- The `process.env.NODE_ENV` in the source code will be replaced with `'production'`.
- The `import.meta.env.MODE` in the source code will be replaced with `'production'`.
- The `import.meta.env.DEV` in the source code will be replaced with `false`.
Expand Down
24 changes: 12 additions & 12 deletions website/docs/en/guide/debug/build-profiling.mdx
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
# Build profiling

Performing a performance analysis can help you identify performance bottlenecks in your project, allowing for targeted optimization.
Running a performance analysis helps you identify bottlenecks in your project so you can optimize the right areas.

## Using Rsdoctor

Rsdoctor is a build analyzer that can visually display the compilation time of each loader and plugin.
Rsdoctor is a build analyzer that visualizes how long each loader and plugin takes to compile.

Please refer to [Use Rsdoctor](/guide/debug/rsdoctor) for more information.
See [Use Rsdoctor](/guide/debug/rsdoctor) for more information.

## Node.js profiling

When Rsbuild executes a build, it will include the runtime overhead of both JavaScript and Rust code, and the overhead of data communication between JavaScript and Rust.
A build runs both JavaScript and Rust code and incurs communication overhead between them.

In general, the performance overhead on the JavaScript side will be greater than that on the Rust side. You can use Node.js profiling to analyze the overhead on the JS side, which helps to identify performance bottlenecks on the JS side.
JavaScript overhead is usually higher than Rust overhead. Use Node.js profiling to understand where time is spent in JavaScript and pinpoint bottlenecks.

For example, to perform the [CPU profiling](https://nodejs.org/docs/v20.17.0/api/cli.html#--cpu-prof) analysis, run the following command in the root directory of your project:
For example, to capture a [CPU profile](https://nodejs.org/docs/v20.17.0/api/cli.html#--cpu-prof), run the following commands from your project root:

```bash
# dev
Expand All @@ -27,7 +27,7 @@ node --cpu-prof ./node_modules/@rsbuild/core/bin/rsbuild.js build
node --cpu-prof --cpu-prof-interval=100 ./node_modules/@rsbuild/core/bin/rsbuild.js build
```

The above commands will generate a `*.cpuprofile` file. We can use [speedscope](https://github.com/jlfwong/speedscope) to visualize this file:
These commands generate a `*.cpuprofile` file. You can use [speedscope](https://github.com/jlfwong/speedscope) to visualize it:

```bash
# Install speedscope
Expand All @@ -40,7 +40,7 @@ speedscope CPU.date.000000.00000.0.001.cpuprofile

## Rspack profiling

Rsbuild supports the use of the `RSPACK_PROFILE` environment variable for Rspack build performance profile.
Set the `RSPACK_PROFILE` environment variable to capture an Rspack build performance profile.

```json title="package.json"
{
Expand All @@ -51,7 +51,7 @@ Rsbuild supports the use of the `RSPACK_PROFILE` environment variable for Rspack
}
```

As Windows does not support the above usage, you can also use [cross-env](https://npmjs.com/package/cross-env) to set environment variables. This ensures compatibility across different systems:
Because Windows does not support this syntax, you can use [cross-env](https://npmjs.com/package/cross-env) to set environment variables across different systems:

```json title="package.json"
{
Expand All @@ -65,12 +65,12 @@ As Windows does not support the above usage, you can also use [cross-env](https:
}
```

When the build command is finished, or the dev server is shut down, Rsbuild will create a `.rspack-profile-${timestamp}-${pid}` folder in the current directory, containing a `rspack.pftrace` file (in versions before 1.4.0, it was `trace.json`), which is generated by Rspack based on [tracing](https://github.com/tokio-rs/tracing) and records the time spent on each phase at a granular level, and can be viewed using [ui.perfetto.dev](https://ui.perfetto.dev/).
After the build finishes or the dev server stops, Rsbuild creates a `.rspack-profile-${timestamp}-${pid}` folder in the current directory. It contains a `rspack.pftrace` file (in versions before 1.4.0, the file name was `trace.json`) generated by Rspack using [tracing](https://github.com/tokio-rs/tracing). The file records the time spent in each phase and can be viewed with [ui.perfetto.dev](https://ui.perfetto.dev/).

:::tip

- When shutting down the dev server, use `CTRL + D` instead of `CTRL + C` to ensure that Rspack can record the performance data completely.
- The generated `trace.json` file is large, if you need to share it with others, you can compress it into a zip file to reduce the size.
- When shutting down the dev server, press `CTRL + D` instead of `CTRL + C` so Rspack can finish recording performance data.
- The generated `trace.json` file can be large. Compress it into a zip file before sharing.
- For more information about Rspack profiling, refer to [Rspack - Tracing](https://rspack.rs/contribute/development/tracing).

:::
12 changes: 6 additions & 6 deletions website/docs/en/guide/debug/debug-mode.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Debug mode

Rsbuild provides a debug mode to troubleshoot problems. You can add the `DEBUG=rsbuild` environment variable when building to enable Rsbuild's debug mode.
Rsbuild provides a debug mode to troubleshoot problems. Add the `DEBUG=rsbuild` environment variable when you run a build to enable it.

```bash
# Debug in development mode
Expand All @@ -10,11 +10,11 @@ DEBUG=rsbuild pnpm dev
DEBUG=rsbuild pnpm build
```

In debug mode, Rsbuild will output additional log information and write the Rsbuild config and Rspack config to the dist directory, making it convenient for developers to view and debug.
In debug mode, Rsbuild prints additional log information and writes the Rsbuild and Rspack configs to the `dist` directory so you can inspect them.

## Log information

In debug mode, you will see some logs in the terminal starting with `rsbuild`, including internal operations performed by Rsbuild and the current version of Rspack being used.
In debug mode, the terminal shows logs that start with `rsbuild`, including internal operations and the Rspack version in use.

```bash
$ DEBUG=rsbuild pnpm dev
Expand All @@ -26,7 +26,7 @@ $ DEBUG=rsbuild pnpm dev
...
```

Additionally, the following logs will be output in the terminal, indicating that Rsbuild has written the internally generated build configurations to disk. You can open these config files to view the corresponding content.
Rsbuild also prints the following message to indicate that it has written the generated build configurations to disk. Open these files to review the contents.

```bash
config inspection completed, generated files:
Expand All @@ -37,7 +37,7 @@ config inspection completed, generated files:

## Rsbuild config file

In debug mode, Rsbuild will automatically generate a `dist/.rsbuild/rsbuild.config.mjs` file, which contains the final generated Rsbuild config. In this file, you can see the final result of the Rsbuild config you passed in after being processed by the framework and Rsbuild.
In debug mode, Rsbuild automatically generates a `dist/.rsbuild/rsbuild.config.mjs` file that contains the final Rsbuild config after the framework finishes processing your settings.

The structure of the file is as follows:

Expand All @@ -57,7 +57,7 @@ For a complete introduction to Rsbuild config, please see the [Configure Rsbuild

## Rspack config file

Rsbuild will also automatically generate `dist/.rsbuild/rspack.config.web.mjs` file, which contains the final generated Rspack config. In this file, you can see what is included in the config that Rsbuild finally passes to Rspack.
Rsbuild also creates a `dist/.rsbuild/rspack.config.web.mjs` file with the final Rspack config that Rsbuild passes to Rspack.

The structure of the file is as follows:

Expand Down
14 changes: 7 additions & 7 deletions website/docs/en/guide/debug/rsdoctor.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,21 @@

[Rsdoctor](https://rsdoctor.rs/) is a build analyzer tailored for the Rspack ecosystem.

Rsdoctor is committed to being a one-stop, intelligent build analyzer that makes the build process transparent, predictable, and optimizable through visualization and smart analysis, helping development teams precisely identify bottlenecks, optimize performance, and improve engineering quality.
Rsdoctor aims to be a one-stop, intelligent build analyzer that makes the build process transparent, predictable, and optimizable through visualization and smart analysis, helping teams pinpoint bottlenecks, improve performance, and raise engineering quality.

To debug the build outputs or build process, you can use Rsdoctor for troubleshooting.
Use Rsdoctor to debug build outputs or the build process.

## Quick start

In a Rsbuild-based project, you can enable Rsdoctor as follows:
In an Rsbuild project, enable Rsdoctor as follows:

1. Install the Rsdoctor plugin:

import { PackageManagerTabs } from '@theme';

<PackageManagerTabs command="add @rsdoctor/rspack-plugin -D" />

2. Add `RSDOCTOR=true` environment variable before the CLI command:
2. Set the `RSDOCTOR=true` environment variable before running the CLI command:

```json title="package.json"
{
Expand All @@ -27,7 +27,7 @@ import { PackageManagerTabs } from '@theme';
}
```

As Windows does not support the above usage, you can also use [cross-env](https://npmjs.com/package/cross-env) to set environment variables. This ensures compatibility across different systems:
Because Windows does not support this syntax, you can use [cross-env](https://npmjs.com/package/cross-env) to set environment variables across different systems:

```json title="package.json"
{
Expand All @@ -41,11 +41,11 @@ As Windows does not support the above usage, you can also use [cross-env](https:
}
```

After running the above commands, Rsbuild will automatically register the Rsdoctor plugin, and after the build is completed, it will open the build analysis page. For complete features, please refer to [Rsdoctor document](https://rsdoctor.rs/).
After running these scripts, Rsbuild automatically registers the Rsdoctor plugin and opens the build analysis page when the build finishes. See the [Rsdoctor documentation](https://rsdoctor.rs/) for all features.

## Options

To configure the [options](https://rsdoctor.rs/config/options/options) provided by the Rsdoctor plugin, please manually register the Rsdoctor plugin:
To configure the [options](https://rsdoctor.rs/config/options/options) exposed by the Rsdoctor plugin, manually register the plugin:

```ts title="rsbuild.config.ts"
import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
Expand Down
Loading