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
4 changes: 2 additions & 2 deletions website/docs/en/guide/advanced/env-vars.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down Expand Up @@ -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

Expand Down
6 changes: 3 additions & 3 deletions website/docs/en/guide/basic/server.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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`.

Expand Down Expand Up @@ -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

Expand Down
6 changes: 3 additions & 3 deletions website/docs/en/guide/basic/static-assets.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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"
<!-- Wrong -->
Expand All @@ -249,7 +249,7 @@ Keep these points in mind when using the `public` folder:
<link rel="icon" href="/favicon.ico" />
```

- 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
Expand All @@ -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

Expand Down
2 changes: 1 addition & 1 deletion website/docs/en/guide/optimization/build-performance.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
10 changes: 5 additions & 5 deletions website/docs/en/guide/optimization/optimize-bundle.mdx
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
# 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

It is common for web projects to bundle multiple versions of third-party dependencies. Duplicate dependencies can lead to increased bundle size and slower build speed.

### 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)

For more details, see [Rsdoctor - Duplicate Dependency Problem](https://rsdoctor.rs/blog/topic/duplicate-pkg-problem).

### 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.

Expand Down Expand Up @@ -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';
Expand All @@ -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.

Expand Down
Loading