docs: improve clarity and naturalness of English documentation (#6345)

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: chenjiahan <[email protected]>
Co-authored-by: neverland <[email protected]>

Author: Copilot

website/docs/en/config/server/open.mdx

@@ -23,7 +23,7 @@ type Open =
 
 `server.open` can be set to the following values.
 
-- Open the project's default preview page, which defaults to `http://localhost:<port>`. If [server.host](/config/server/host) is configured, it defaults to `http://<host>:<port>`.
+- Open the project's default preview page (`http://localhost:<port>`, or `http://<host>:<port>` if [server.host](/config/server/host) is configured).
 
 ```ts title="rsbuild.config.ts"
 export default {
@@ -75,7 +75,7 @@ export default {
 
 ## Port placeholder
 
-The port number that Rsbuild server listens on may change. For example, if the port is in use, Rsbuild will automatically increment the port number until it finds an available port.
+The port number that Rsbuild server listens on may change. For example, if the port is already in use, Rsbuild will automatically increment the port number until it finds an available port.
 
 To avoid `server.open` becoming invalid due to port changes, you can use one of the following methods:
 

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

@@ -10,7 +10,7 @@ Before dealing with compatibility issues, you first need to determine which brow
 
 - 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 according to that scope, downgrade JavaScript syntax and CSS syntax, and inject the required polyfill. In most cases, you can safely use modern ECMAScript features without worrying about compatibility issues.
+- 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.
 
 After setting the browserslist, if you still encounter compatibility issues, please continue reading the content below to find solutions.
 

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

@@ -222,7 +222,7 @@ export default {
 
 ## `.env` file
 
-When a `.env` file exists in the project root directory, Rsbuild CLI automatically uses [dotenv](https://npmjs.com/package/dotenv) to load these environment variables and add them to the current Node.js process. The [Public Variables](#public-variables) will be exposed in client code.
+When a `.env` file exists in the project root directory, Rsbuild CLI automatically uses [dotenv](https://npmjs.com/package/dotenv) to load these environment variables and add them to the current Node.js process. [Public Variables](#public-variables) will be exposed in client code.
 
 You can access these environment variables through `import.meta.env.[name]` or `process.env.[name]`.
 
@@ -233,13 +233,13 @@ Rsbuild supports reading the following types of env files:
 | File Name                | Description                                                                |
 | ------------------------ | -------------------------------------------------------------------------- |
 | `.env`                   | Loaded by default in all scenarios.                                        |
-| `.env.local`             | Local usage of the `.env` file, should be added to .gitignore.             |
+| `.env.local`             | Local overrides for `.env`, should be added to `.gitignore`.               |
 | `.env.development`       | Read when `process.env.NODE_ENV` is `'development'`.                       |
 | `.env.production`        | Read when `process.env.NODE_ENV` is `'production'`.                        |
-| `.env.development.local` | Local usage of the `.env.development` file, should be added to .gitignore. |
-| `.env.production.local`  | Local usage of the `.env.production` file, should be added to .gitignore.  |
+| `.env.development.local` | Local overrides for `.env.development`, should be added to `.gitignore`.   |
+| `.env.production.local`  | Local overrides for `.env.production`, should be added to `.gitignore`.    |
 
-If multiple of the above files exist, they will all be loaded, with files listed lower in the table having higher priority.
+If multiple of the above files exist, they will all be loaded. Files listed lower in the table have higher priority.
 
 ### Env mode
 
@@ -251,7 +251,7 @@ For example, set the env mode as `test`:
 npx rsbuild dev --env-mode test
 ```
 
-Rsbuild will read these files in the following order and merge their contents. If the same environment variable is defined in multiple files, values from files loaded later will override those from files loaded earlier:
+Rsbuild will read these files in the following order and merge their contents. If the same environment variable is defined in multiple files, files loaded later will override those loaded earlier:
 
 - .env
 - .env.local
@@ -275,7 +275,7 @@ For example, to specify the env directory as `config`:
 npx rsbuild dev --env-dir config
 ```
 
-In this case, Rsbuild will read the `./config/.env` and other env files.
+Rsbuild will then read `./config/.env` and other env files from that directory.
 
 ### Example
 
@@ -361,7 +361,7 @@ console.log(process.env.PASSWORD); // -> undefined
 :::tip
 
 - The content of public variables will be exposed to your client code, so please avoid including sensitive information in public variables.
-- Public variables are replaced through [source.define](/config/source/define). Please read ["Using define"](#using-define) to understand the principles and notes of define.
+- Public variables are replaced through [source.define](/config/source/define). Read ["Using define"](#using-define) to understand the principles and caveats of define.
 
 :::
 
@@ -471,10 +471,10 @@ export default {
 
 If you use the above approach, it will cause the following problems:
 
-1. Some unused environment variables are additionally injected, causing the dev server's environment variables to leak into the frontend code.
-2. Each `process.env` reference will be replaced by a complete environment variable object, increasing bundle size and decreasing performance.
+1. Unused environment variables are injected unnecessarily, causing the dev server's environment variables to leak into the frontend code.
+2. Every `process.env` reference will be replaced with the complete environment variable object, increasing bundle size and reducing performance.
 
-Therefore, inject environment variables on `process.env` according to actual needs and avoid replacing it entirely.
+Therefore, only inject the specific environment variables you need on `process.env`, and avoid replacing it entirely.
 
 ## Type declarations
 

website/docs/en/guide/framework/react.mdx

@@ -48,7 +48,7 @@ To use SVGR, you also need to register the [SVGR plugin](/plugins/list/plugin-sv
 
 Rsbuild uses React's official [Fast Refresh](https://npmjs.com/package/react-refresh) capability to perform component hot updates.
 
-Note that React Refresh requires components to be written according to standards, otherwise HMR may not work. You can use [eslint-plugin-react-refresh](https://github.com/ArnaudBarre/eslint-plugin-react-refresh) for validation.
+Note that React Refresh requires components to follow certain standards, otherwise HMR may not work. You can use [eslint-plugin-react-refresh](https://github.com/ArnaudBarre/eslint-plugin-react-refresh) for validation.
 
 For example, if React component hot updates don't work, or the component state is lost after hot updates, it's usually because your React component uses an anonymous function. React Fast Refresh requires that components cannot be anonymous functions, otherwise component state cannot be preserved after hot updates.
 

website/docs/en/guide/optimization/build-performance.mdx

@@ -8,7 +8,7 @@ This document provides optional optimization methods to improve build performanc
 
 Performance profiling helps identify bottlenecks in your project, enabling targeted optimization.
 
-Please refer to the [Build Performance Analysis](/guide/debug/build-profiling) section.
+See the [Build Performance Analysis](/guide/debug/build-profiling) section.
 
 ## General optimization
 
@@ -30,13 +30,13 @@ Optimizing the number of modules referenced by the application reduces bundle si
 
 When using Tailwind CSS v3, incorrectly configuring the `content` field in `tailwind.config.js` can lead to poor build and HMR performance.
 
-Refer to [Tailwind CSS v3 - Optimize build performance](/guide/styling/tailwindcss-v3#optimize-build-performance) for more details.
+See [Tailwind CSS v3 - Optimize build performance](/guide/styling/tailwindcss-v3#optimize-build-performance) for more details.
 
 ### Parallel Less compilation
 
 If your project uses the [@rsbuild/plugin-less](/plugins/list/plugin-less) plugin with a large number of Less files, you can try enabling parallel compilation to improve build performance.
 
-Refer to [Less Plugin - parallel](/plugins/list/plugin-less#parallel) for more details.
+See [Less Plugin - parallel](/plugins/list/plugin-less#parallel) for more details.
 
 ### Tool selection
 
@@ -62,7 +62,7 @@ export default {
 };
 ```
 
-> Refer to [dev.lazyCompilation](/config/dev/lazy-compilation) for more information.
+> See [dev.lazyCompilation](/config/dev/lazy-compilation) for more information.
 
 ### Enable native watcher
 

website/docs/en/guide/optimization/code-splitting.mdx

@@ -14,13 +14,13 @@ Rsbuild supports the following chunk splitting strategies:
 
 - `split-by-experience`: an empirical splitting strategy, automatically splits some commonly used npm packages into chunks of moderate size.
 - `split-by-module`: split by NPM package granularity, each NPM package corresponds to a chunk.
-- `split-by-size`: automatically split according to module size.
+- `split-by-size`: automatically split based on module size.
 - `all-in-one`: bundle all codes into one chunk.
 - `single-vendor`: bundle all NPM packages into a single chunk.
 - `custom`: custom chunk splitting strategy.
 
 ::: tip
-When using strategies other than `all-in-one`, Rspack's default splitting rules will also take effect. For more details, please refer to [Rspack - SplitChunksPlugin](https://rspack.rs/plugins/webpack/split-chunks-plugin#default-behavior).
+When using strategies other than `all-in-one`, Rspack's default splitting rules will also take effect. For more details, see [Rspack - SplitChunksPlugin](https://rspack.rs/plugins/webpack/split-chunks-plugin#default-behavior).
 :::
 
 ## split-by-experience
@@ -238,7 +238,7 @@ export default {
 };
 ```
 
-The `override` config will be merged with Rspack's `splitChunks` config. For specific config details, please refer to [Rspack - splitChunks](https://rspack.rs/config/optimization#optimizationsplitchunks).
+The `override` config will be merged with Rspack's `splitChunks` config. For specific config details, see [Rspack - splitChunks](https://rspack.rs/config/optimization#optimizationsplitchunks).
 
 ## Using dynamic import for code splitting
 

website/docs/en/guide/optimization/inline-assets.mdx

@@ -2,7 +2,7 @@
 
 Inlining static assets refers to embedding the content of a static asset directly in an HTML or JS file, instead of linking to an external file. This can improve website performance by reducing the number of HTTP requests the browser needs to make to load the page.
 
-However, inlining static assets has some disadvantages, such as increasing the size of a single file, which may lead to slower loading. Therefore, you should decide whether to inline assets based on your specific situation.
+However, inlining static assets has some disadvantages, such as increasing the size of a single file, which may lead to slower loading. You should decide whether to inline assets based on your specific situation.
 
 Rsbuild automatically inlines static assets smaller than 4KiB. Sometimes you may need to manually control whether assets are inlined. This document explains how to precisely control the inlining behavior of static assets.
 

website/docs/en/guide/optimization/optimize-bundle.mdx

@@ -52,7 +52,7 @@ See the [performance.bundleAnalyze](/config/performance/bundle-analyze) configur
 
 ## Adjust browserslist
 
-The Rsbuild will compile the code according to the project's Browserslist config, and inject some Polyfills. If the project does not need to be compatible with legacy browsers, you can adjust the Browserslist and drop some legacy browsers, thereby reducing the compilation overhead on syntax and polyfill.
+Rsbuild will compile the code based on the project's browserslist config and inject some polyfills. If your project doesn't need to support legacy browsers, you can adjust the browserslist to drop support for older browsers, reducing the compilation overhead for syntax transformation and polyfills.
 
 Rsbuild's default Browserslist config is:
 

website/docs/en/guide/styling/tailwindcss-v3.mdx

@@ -43,7 +43,7 @@ module.exports = {
 The above configuration is for reference only and can be modified to suit the needs of your project. For example, non-TypeScript projects do not need to include ts and tsx files.
 :::
 
-It should be noted that the `content` option should include the paths to all source files that contain Tailwind class names. For details, please refer to [tailwindcss - Content Configuration](https://v3.tailwindcss.com/docs/content-configuration).
+Note that the `content` option should include the paths to all source files that contain Tailwind class names. For details, see [tailwindcss - Content Configuration](https://v3.tailwindcss.com/docs/content-configuration).
 
 ```js title="tailwind.config.js"
 /** @type {import('tailwindcss').Config} */