diff --git a/website/docs/en/config/log-level.mdx b/website/docs/en/config/log-level.mdx index 365aa8fe05..ec1572db61 100644 --- a/website/docs/en/config/log-level.mdx +++ b/website/docs/en/config/log-level.mdx @@ -4,11 +4,11 @@ - **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 { @@ -16,7 +16,7 @@ export default { }; ``` -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 { @@ -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). diff --git a/website/docs/en/config/mode.mdx b/website/docs/en/config/mode.mdx index 4b303eb160..d13f5d3378 100644 --- a/website/docs/en/config/mode.mdx +++ b/website/docs/en/config/mode.mdx @@ -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 @@ -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`. @@ -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`. diff --git a/website/docs/en/guide/debug/build-profiling.mdx b/website/docs/en/guide/debug/build-profiling.mdx index 0185594687..76fd680e52 100644 --- a/website/docs/en/guide/debug/build-profiling.mdx +++ b/website/docs/en/guide/debug/build-profiling.mdx @@ -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 @@ -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 @@ -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" { @@ -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" { @@ -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). ::: diff --git a/website/docs/en/guide/debug/debug-mode.mdx b/website/docs/en/guide/debug/debug-mode.mdx index 2983e1f9b3..069b28473e 100644 --- a/website/docs/en/guide/debug/debug-mode.mdx +++ b/website/docs/en/guide/debug/debug-mode.mdx @@ -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 @@ -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 @@ -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: @@ -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: @@ -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: diff --git a/website/docs/en/guide/debug/rsdoctor.mdx b/website/docs/en/guide/debug/rsdoctor.mdx index 0c70a6b4a5..2e8f5d4229 100644 --- a/website/docs/en/guide/debug/rsdoctor.mdx +++ b/website/docs/en/guide/debug/rsdoctor.mdx @@ -2,13 +2,13 @@ [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: @@ -16,7 +16,7 @@ import { PackageManagerTabs } from '@theme'; -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" { @@ -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" { @@ -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';