docs: improve documentation clarity and naturalness

website/docs/en/guide/advanced/browser-compatibility.mdx

@@ -2,20 +2,20 @@
 
 Rsbuild supports [modern browsers](/guide/advanced/browserslist#default-browserslist) by default and provides syntax and API downgrade capabilities to ensure compatibility with legacy browsers that support ES5 (such as IE11).
 
-This chapter introduces how to use Rsbuild's features to address browser compatibility issues.
+This chapter explains how to use Rsbuild's features to address browser compatibility issues.
 
 ## Set browserslist
 
-Before dealing with compatibility issues, you first need to determine which browsers your project needs to support and add the corresponding browserslist config.
+Before dealing with compatibility issues, you need to determine which browsers your project needs to support and add the corresponding browserslist config.
 
 - If you haven't set browserslist yet, please read the [Browserslist](/guide/advanced/browserslist) chapter first.
 
-- If you have set a browserslist, Rsbuild will automatically compile to match that scope, downgrade JavaScript and CSS syntax, and inject the required polyfills. In most cases, you can safely use modern ECMAScript features without worrying about compatibility issues.
+- If you have set a browserslist, Rsbuild automatically compiles to match that scope, downgrades JavaScript and CSS syntax, and injects required polyfills. In most cases, you can safely use modern ECMAScript features without worrying about compatibility issues.
 
-After setting the browserslist, if you still encounter compatibility issues, please continue reading the content below to find solutions.
+After setting the browserslist, if you still encounter compatibility issues, continue reading to find solutions.
 
 :::tip What is polyfill
-A polyfill is code that provides the functionality of newer features to older browsers that do not support them natively. It fills in the gaps in older browsers' implementations of web standards, allowing developers to use newer features without worrying about whether they will work in older browsers. For example, if a browser doesn't support the `Array.prototype.flat()` method, a polyfill can provide that functionality, allowing code that uses `Array.prototype.flat()` to work in that browser. Polyfills are commonly used to ensure web applications work across a wide range of browsers, including older ones.
+A polyfill is code that provides the functionality of newer features to older browsers that don't support them natively. It fills gaps in older browsers' implementations of web standards, allowing developers to use newer features without worrying about whether they'll work in older browsers. For example, if a browser doesn't support the `Array.prototype.flat()` method, a polyfill can provide that functionality, allowing code that uses `Array.prototype.flat()` to work in that browser. Polyfills are commonly used to ensure web applications work across a wide range of browsers, including older ones.
 :::
 
 ## Background knowledge
@@ -24,9 +24,9 @@ Before dealing with compatibility issues, it is recommended that you understand
 
 ### Syntax downgrade and API downgrade
 
-When you use higher-version syntax and APIs in your project, to make the compiled code run reliably in lower-version browsers, we need to downgrade two parts: syntax downgrade and API downgrade.
+When you use higher-version syntax and APIs in your project, to make the compiled code run reliably in lower-version browsers, we need to downgrade two parts: syntax and APIs.
 
-**Rsbuild downgrades syntax through syntax transpilation, and downgrades APIs through polyfill injection.**
+**Rsbuild downgrades syntax through transpilation and downgrades APIs through polyfill injection.**
 
 > Syntax and APIs are not tightly coupled. When browser manufacturers implement the engine, they will support some syntax or implement some APIs in advance according to the specification or their own needs. Therefore, browsers from different manufacturers in the same period are not necessarily compatible with syntax and API. So in general practice, syntax and API are handled in two parts.
 
@@ -61,7 +61,7 @@ SyntaxError: Unexpected token.
 
 It's obvious from the error message that this is a syntax error, meaning this syntax is not supported in older versions of the engine.
 
-**Syntax cannot be supported by polyfill or shim**. To run syntax that's not originally supported in a lower-version browser, you need to transpile the code into syntax that the lower-version engine can support.
+**Syntax cannot be supported by polyfill or shim**. To run syntax that's not originally supported in a lower-version browser, you need to transpile the code into syntax the lower-version engine can support.
 
 Transpile the above code into the following to run in older version engines:
 
@@ -70,7 +70,7 @@ var foo = {};
 foo === null || foo === void 0 ? void 0 : foo.bar();
 ```
 
-After transpilation, the syntax of the code has changed, and some syntax that the engine of the lower version cannot understand has been replaced with the syntax it can understand, **but the meaning of the code itself has not changed**.
+After transpilation, the syntax of the code has changed, and some syntax the lower-version engine cannot understand has been replaced with syntax it can understand, **but the meaning of the code itself hasn't changed**.
 
 If the engine encounters an unrecognized syntax when converting to AST, it will report a syntax error and abort code execution. In this case, if your project doesn't use capabilities such as SSR or SSG, the page will be blank, making it unavailable.
 

website/docs/en/guide/advanced/env-vars.mdx

@@ -1,6 +1,6 @@
 # Environment variables
 
-Rsbuild supports injecting environment variables or expressions into your code during the build. This helps you distinguish between different environments or replace constants.
+Rsbuild supports injecting environment variables or expressions into your code during the build. This helps you distinguish between environments or replace constants.
 
 This chapter explains how to use environment variables in Rsbuild.
 
@@ -84,7 +84,7 @@ if (import.meta.env.PROD) {
 - **Type:** `string`
 - **Scope:** Available in source code, replaced at build time via [define](/guide/advanced/env-vars#using-define)
 
-You can use `import.meta.env.BASE_URL` in client code to access the [base path](/guide/basic/server#base-path) of the server. This base path is determined by the [server.base](/config/server/base) configuration and is helpful for referencing assets from the [public folder](/guide/basic/static-assets#public-folder) in your code.
+You can use `import.meta.env.BASE_URL` in client code to access the [base path](/guide/basic/server#base-path) of the server. This base path is determined by the [server.base](/config/server/base) configuration and is useful for referencing assets from the [public folder](/guide/basic/static-assets#public-folder) in your code.
 
 For example, set the server's base path to `/foo` using the [server.base](/config/server/base) configuration:
 

website/docs/en/guide/advanced/hmr.mdx

@@ -1,16 +1,16 @@
 # Hot module replacement
 
-Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running, without a full reload. This can significantly speed up development in a few ways:
+Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application runs, without a full reload. This significantly speeds up development in several ways:
 
-- Retain application state which is lost during a full reload.
-- Save valuable development time by only updating what's changed.
-- Instantly update the browser when modifications are made to CSS / JS in the source code, which is almost comparable to changing styles directly in the browser's dev tools.
+- Retain application state that is lost during a full reload.
+- Save valuable development time by updating only what changed.
+- Instantly update the browser when modifying CSS / JS in source code, almost comparable to changing styles directly in the browser's dev tools.
 
 ## HMR toggle
 
 Rsbuild has built-in support for HMR, which is enabled by default in development mode.
 
-If you don't need HMR, set [dev.hmr](/config/dev/hmr) to `false`. This will disable HMR and React Refresh, and Rsbuild will automatically fall back to [dev.liveReload](/config/dev/live-reload).
+If you don't need HMR, set [dev.hmr](/config/dev/hmr) to `false`. This disables HMR and React Refresh, and Rsbuild automatically falls back to [dev.liveReload](/config/dev/live-reload).
 
 ```ts title="rsbuild.config.ts"
 export default {
@@ -20,7 +20,7 @@ export default {
 };
 ```
 
-To disable both HMR and live reload, set both [dev.hmr](/config/dev/hmr) and [dev.liveReload](/config/dev/live-reload) to `false`. Then, no WebSocket requests will be made to the dev server from the page, and the page will not automatically refresh when files change.
+To disable both HMR and live reload, set both [dev.hmr](/config/dev/hmr) and [dev.liveReload](/config/dev/live-reload) to `false`. Then, no WebSocket requests will be made from the page to the dev server, and the page won't automatically refresh when files change.
 
 ```ts title="rsbuild.config.ts"
 export default {
@@ -35,7 +35,7 @@ export default {
 
 By default, Rsbuild uses the host and port number of the current page to construct the WebSocket URL for HMR.
 
-When the HMR connection fails, you can specify the WebSocket URL by customizing [dev.client](/config/dev/client) config.
+When the HMR connection fails, you can specify the WebSocket URL by customizing the [dev.client](/config/dev/client) config.
 
 ```ts title="rsbuild.config.ts"
 export default {
@@ -50,7 +50,7 @@ export default {
 
 ## File watching
 
-By default, Rsbuild does not watch files in the `.git/` and `node_modules/` directories. When files in these directories change, Rsbuild will not trigger a rebuild. This reduces memory usage and improves build performance.
+By default, Rsbuild doesn't watch files in the `.git/` and `node_modules/` directories. When files in these directories change, Rsbuild won't trigger a rebuild. This reduces memory usage and improves build performance.
 
 If you want to watch these directories, you can manually configure Rspack's [watchOptions.ignored](https://rspack.rs/config/watch#watchoptionsignored) to override the default behavior.
 

website/docs/en/guide/basic/html-template.mdx

@@ -51,7 +51,7 @@ In the default template, `id="<%= mountId %>"` is replaced with `id="root"`. Mod
 
 You can set the HTML `<title>` tag through the [html.title](/config/html/title) config.
 
-When there is only one page in your project, just use the `html.title` setting directly:
+When your project has only one page, use the `html.title` setting directly:
 
 ```ts title="rsbuild.config.ts"
 export default {
@@ -78,7 +78,7 @@ export default {
 ```
 
 :::tip
-For single-page applications (SPA), Rsbuild will include an initial title in the HTML page, but you usually need to dynamically update the page title on route switching, for example using some routing libraries or libraries like [React Helmet](https://github.com/nfl/react-helmet).
+For single-page applications (SPA), Rsbuild includes an initial title in the HTML page, but you typically need to dynamically update the page title on route changes, for example using routing libraries or libraries like [React Helmet](https://github.com/nfl/react-helmet).
 :::
 
 ## Set page icon

website/docs/en/guide/basic/static-assets.mdx

@@ -3,7 +3,7 @@
 Rsbuild supports importing static assets, including images, fonts, audio, and video.
 
 :::tip What are static assets
-Static assets are files that are part of a web application and don't change during use. Examples include images, fonts, media files, stylesheets, and JavaScript files. These assets are typically stored on a web server or CDN and delivered to the user's browser when they access the application. Since they don't change, static assets can be cached by the browser, improving application performance.
+Static assets are files that are part of a web application and don't change during use. Examples include images, fonts, media files, stylesheets, and JavaScript files. These assets are typically stored on a web server or CDN and delivered to the user's browser when they access the application. Because they don't change, static assets can be cached by the browser, improving application performance.
 :::
 
 ## Asset formats
@@ -56,7 +56,7 @@ console.log(logo); // "/static/logo.[hash].png"
 export default () => <img src={logo} />;
 ```
 
-When using `new URL()` to reference `.js` or `.ts` files, they are treated as URL assets and aren't processed by Rsbuild's built-in SWC loader.
+When using `new URL()` to reference `.js` or `.ts` files, they're treated as URL assets and aren't processed by Rsbuild's built-in SWC loader.
 
 ```tsx
 // foo.ts will remain the original content and be output to the dist directory
@@ -65,7 +65,7 @@ const fooTs = new URL('./foo.ts', import.meta.url).href;
 console.log(fooTs); // "/static/foo.[hash].ts"
 ```
 
-Similarly, when using `new URL()` to reference `.css` or `.scss` files, they are treated as URL assets and aren't processed by Rsbuild's built-in CSS loaders.
+Similarly, when using `new URL()` to reference `.css` or `.scss` files, they're treated as URL assets and aren't processed by Rsbuild's built-in CSS loaders.
 
 ```tsx
 // foo.css will remain the original content and be output to the dist directory

website/docs/en/guide/basic/typescript.mdx

@@ -8,7 +8,7 @@ Rsbuild uses [SWC](/guide/configuration/swc) by default for transforming TypeScr
 
 ### Isolated modules
 
-Unlike the native TypeScript compiler, tools like SWC and Babel compile each file separately and cannot determine whether an imported name is a type or value. When using TypeScript in Rsbuild, enable the [verbatimModuleSyntax](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) or [isolatedModules](https://typescriptlang.org/tsconfig/#isolatedModules) option in your `tsconfig.json`:
+Unlike the native TypeScript compiler, tools like SWC and Babel compile each file separately and cannot determine whether an imported name is a type or value. When using TypeScript in Rsbuild, enable the [verbatimModuleSyntax](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) or [isolatedModules](https://typescriptlang.org/tsconfig/#isolatedModules) option in `tsconfig.json`:
 
 - For TypeScript >= 5.0.0, use the `verbatimModuleSyntax` option, which enables the `isolatedModules` option by default:
 
@@ -56,19 +56,19 @@ Create a `src/env.d.ts` file to reference these types:
 
 ## Type checking
 
-When transpiling TypeScript code using tools like SWC and Babel, type checking is not performed.
+When transpiling TypeScript code using tools like SWC and Babel, type checking isn't performed.
 
 ### Type check plugin
 
 To enable type checking, you can use the [@rsbuild/plugin-type-check](https://github.com/rspack-contrib/rsbuild-plugin-type-check) plugin. This plugin runs TypeScript type checking in a separate process and internally integrates [ts-checker-rspack-plugin](https://github.com/rspack-contrib/ts-checker-rspack-plugin).
 
-The plugin supports type checking in both dev and build modes, helping you catch type errors early during development.
+The plugin supports type checking in both dev and build modes, helping you catch type errors early in development.
 
 Refer to [@rsbuild/plugin-type-check](https://github.com/rspack-contrib/rsbuild-plugin-type-check) for usage instructions.
 
 ### Using tsc
 
-You can also use [tsc](https://www.typescriptlang.org/docs/handbook/compiler-options.html) directly for type checking by adding a `type-check` step to your `build` script. This approach only performs type checking after the build and does not run during dev mode.
+You can also use [tsc](https://www.typescriptlang.org/docs/handbook/compiler-options.html) directly for type checking by adding a `type-check` step to your `build` script. This approach only performs type checking after the build and doesn't run during dev mode.
 
 ```json title="package.json"
 {