diff --git a/website/docs/en/guide/advanced/env-vars.mdx b/website/docs/en/guide/advanced/env-vars.mdx index ac7db15440..6b1d4adb2b 100644 --- a/website/docs/en/guide/advanced/env-vars.mdx +++ b/website/docs/en/guide/advanced/env-vars.mdx @@ -6,7 +6,7 @@ This chapter explains how to use environment variables in Rsbuild. ## Default variables -By default, Rsbuild uses [source.define](#using-define) to inject environment variables into your code, replacing them with their values during during the build: +By default, Rsbuild uses [source.define](#using-define) to inject environment variables into your code, replacing them with their values during the build: `import.meta.env` contains these environment variables: @@ -206,7 +206,7 @@ if (false) { } ``` -During code minification, `if (false) { ... }` will be recognized as invalid code and removed automatically. +During code minification, `if (false) { ... }` is recognized as dead code and removed automatically. #### Custom NODE_ENV diff --git a/website/docs/en/guide/basic/server.mdx b/website/docs/en/guide/basic/server.mdx index bbe6cb56b0..ff7ad9d235 100644 --- a/website/docs/en/guide/basic/server.mdx +++ b/website/docs/en/guide/basic/server.mdx @@ -88,9 +88,9 @@ export default { ### HTML output path -Normally, `/` points to the dist root directory, and HTML files are output to the dist root directory. In this case, you can access the HTML page at `/some-path`. +Normally, `/` points to the dist root directory, and HTML files are output to the dist root directory. In this case, you can access HTML pages at `/some-path`. -If you output HTML files to other subdirectories by modifying [output.distPath.html](/config/output/dist-path), you need to access the HTML page at `/[htmlPath]/some-path`. +If you output HTML files to other subdirectories by modifying [output.distPath.html](/config/output/dist-path), you need to access HTML pages at `/[htmlPath]/some-path`. For example, if you set HTML files to output to the `HTML` directory, you can access index.html at `/html/`, and foo.html at `/html/foo`. @@ -120,7 +120,7 @@ Compared to the dev server in Rspack CLI, Rsbuild's dev server has the following - **Configuration**: Rsbuild provides richer server configuration options. - **Log Format**: The log format of Rspack CLI is largely consistent with webpack CLI, while Rsbuild's logs are clearer and more readable. -- **Dependencies**: Rsbuild is built on lightweight libraries like `connect`, which has fewer dependencies and faster startup speed compared to `express` used by `@rspack/dev-server`. +- **Dependencies**: Rsbuild is built on lightweight libraries like `connect`, which has fewer dependencies and faster startup than `express` used by `@rspack/dev-server`. ### Configuration diff --git a/website/docs/en/guide/basic/static-assets.mdx b/website/docs/en/guide/basic/static-assets.mdx index 3f5675332d..b009b90a4e 100644 --- a/website/docs/en/guide/basic/static-assets.mdx +++ b/website/docs/en/guide/basic/static-assets.mdx @@ -239,7 +239,7 @@ For example, in an HTML template, the `./public/favicon.ico` file can be referen Keep these points in mind when using the `public` folder: -- When referencing assets in the public folder via URL, please use absolute paths instead of relative paths to ensure that the assets can be accessed correctly after deployment. +- When referencing assets in the public folder via URL, use absolute paths instead of relative paths to ensure assets can be accessed correctly after deployment. ```html title="src/index.html" @@ -249,7 +249,7 @@ Keep these points in mind when using the `public` folder: ``` -- Please avoid importing files from the public directory into the source code. The correct approach is to reference them by URL. You can place static assets imported into the source code in the `/src/assets` directory. +- Avoid importing files from the public directory into your source code. The correct approach is to reference them by URL. You can place static assets that need to be imported into source code in the `/src/assets` directory. ```js title="src/index.js" // Wrong @@ -259,7 +259,7 @@ import logo from '../public/logo.png'; import logo from './assets/logo.png'; ``` -- During the production build, the files in public folder will be copied to the output folder (default is `dist`). Please be careful to avoid name conflicts with the output files. When files in the `public` folder have the same name as outputs, the outputs have higher priority and will overwrite the files with the same name in the `public` folder. This feature can be disabled by setting [server.publicDir.copyOnBuild](/config/server/public-dir) to `false`. +- During the production build, files in the public folder are copied to the output folder (default is `dist`). Be careful to avoid name conflicts with output files. When files in the `public` folder have the same name as outputs, the outputs have higher priority and will overwrite the conflicting public folder files. This feature can be disabled by setting [server.publicDir.copyOnBuild](/config/server/public-dir) to `false`. ### Custom behavior diff --git a/website/docs/en/guide/optimization/build-performance.mdx b/website/docs/en/guide/optimization/build-performance.mdx index 92a462482a..4cfd5ca35b 100644 --- a/website/docs/en/guide/optimization/build-performance.mdx +++ b/website/docs/en/guide/optimization/build-performance.mdx @@ -52,7 +52,7 @@ These methods improve performance in development mode. ### Enable lazy compilation -Enabling lazy compilation can significantly reduce the number of modules compiled at dev startup and improve startup time. +Enabling lazy compilation can significantly reduce the number of modules compiled during dev server startup and improve startup time. ```ts title="rsbuild.config.ts" export default { diff --git a/website/docs/en/guide/optimization/optimize-bundle.mdx b/website/docs/en/guide/optimization/optimize-bundle.mdx index cd9de16e17..6dd3a5dc5b 100644 --- a/website/docs/en/guide/optimization/optimize-bundle.mdx +++ b/website/docs/en/guide/optimization/optimize-bundle.mdx @@ -1,6 +1,6 @@ # Bundle size optimization -Bundle size optimization is an important part in production build because it directly affects the user experience of online users. In this document, we will introduce some common bundle size optimization methods in Rsbuild. +Bundle size optimization is an important part of production builds because it directly affects the user experience. This document introduces common bundle size optimization methods in Rsbuild. ## Reduce duplicate dependencies @@ -8,7 +8,7 @@ It is common for web projects to bundle multiple versions of third-party depende ### Detect duplicate dependencies -You can use [Rsdoctor](https://rsdoctor.rs) to detect whether there are duplicate dependencies in the project. Rsdoctor will analyze during the build process, find any duplicate bundled dependencies and display them visually: +You can use [Rsdoctor](https://rsdoctor.rs) to detect duplicate dependencies in your project. Rsdoctor analyzes the build, finds duplicate bundled dependencies, and displays them visually: ![](https://assets.rspack.rs/rsbuild/assets/rsdoctor-duplicated-packages.png) @@ -16,7 +16,7 @@ For more details, see [Rsdoctor - Duplicate Dependency Problem](https://rsdoctor ### Eliminate duplicate dependencies -We can eliminate duplicate dependencies with the package manager. +You can eliminate duplicate dependencies using your package manager. - Rsbuild provides the [resolve.dedupe](/config/resolve/dedupe) config, which allows you to force the specified packages to be resolved from the project root directory, thereby removing duplicate packages. @@ -90,7 +90,7 @@ Please read the [Browser Compatibility](/guide/advanced/browser-compatibility) c ## Image compression -In general front-end projects, the size of images often accounts for a large proportion of the total bundle size of the project. So if the image size can be reduced as much as possible, it will have a significant optimization effect on the project bundle size. You can enable image compression by registering a plugin in the Rsbuild: +In typical front-end projects, images often account for a large proportion of the total bundle size. Reducing image size can significantly improve bundle size. You can enable image compression by registering a plugin in Rsbuild: ```ts title="rsbuild.config.ts" import { pluginImageCompress } from '@rsbuild/plugin-image-compress'; @@ -104,7 +104,7 @@ See details in [@rsbuild/plugin-image-compress](https://github.com/rspack-contri ## Split chunk -A great chunk splitting strategy is very important to improve the loading performance of the application. It can make full use of the browser's caching mechanism to reduce the number of requests and improve the loading speed of the application. +A good chunk splitting strategy is important for improving application loading performance. It makes full use of the browser's caching mechanism to reduce the number of requests and improve loading speed. Several [chunk splitting strategies](/guide/optimization/code-splitting) are built into Rsbuild. These should meet the needs of most applications. You can also customize the chunk splitting config to suit your own usage scenario.