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
24 changes: 12 additions & 12 deletions website/docs/en/guide/advanced/browser-compatibility.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Before dealing with compatibility issues, you need to determine which browsers y

- If you haven't set browserslist yet, please read the [Browserslist](/guide/advanced/browserslist) chapter first.

- 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.
- If you have set a browserslist, Rsbuild automatically compiles code 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.

After setting the browserslist, if you still encounter compatibility issues, continue reading to find solutions.

Expand All @@ -24,21 +24,21 @@ 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 and APIs.
When you use higher-version syntax and APIs in your project, you need to downgrade two parts to make the compiled code run reliably in older browsers: syntax and APIs.

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

### Syntax transpilation

**Syntax is a set of rules for how a programming language organizes code**, and code that doesn't follow these rules cannot be correctly recognized by the programming language's engine and therefore cannot run. In JavaScript, the following are examples of syntax rules:
**Syntax is a set of rules for how a programming language organizes code**. Code that doesn't follow these rules cannot be correctly recognized by the programming language's engine and therefore cannot run. In JavaScript, the following are examples of syntax rules:

- In `const foo = 1`, `const` means to declare an immutable constant.
- In `foo?.bar?.baz`, `?.` indicates optional chaining of access properties.
- In `async function () {}`, `async` means to declare an asynchronous function.

Because different browser parsers support different syntax, especially older browser engines support less syntax, some syntax will cause errors when run in older browser engines at the AST parsing stage.
Because different browser parsers support different syntax, especially older browser engines that support less syntax, some syntax will cause errors when run in older browser engines during the AST parsing stage.

For example, the following code will cause an error in IE or an older version of Node.js:

Expand All @@ -61,24 +61,24 @@ 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 the lower-version engine can support.
**Syntax cannot be supported by polyfills or shims**. To run syntax that's not originally supported in an older browser, you need to transpile the code into syntax the older engine can support.

Transpile the above code into the following to run in older version engines:
Transpile the above code into the following to run in older engines:

```js
var foo = {};
foo === null || foo === void 0 ? void 0 : foo.bar();
```

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**.
After transpilation, the syntax of the code has changed, and syntax the older 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.
If the engine encounters unrecognized syntax when converting to AST, it will report a syntax error and abort execution. In this case, if your project doesn't use capabilities like SSR or SSG, the page will be blank and unusable.

If the code is successfully converted to AST, the engine will convert the AST into executable code and run it normally inside the engine.
If the code is successfully converted to AST, the engine will convert it into executable code and run it normally.

### API polyfill

JavaScript is an interpreted scripting language, unlike compiled languages like Rust. Rust checks calls in the code during compilation, but JavaScript doesn't know whether a function called by a line of code exists until it actually runs to that line, so some errors only appear at runtime.
JavaScript is an interpreted scripting language, unlike compiled languages like Rust. Rust checks function calls in the code during compilation, but JavaScript doesn't know whether a function exists until it actually runs that line of code, so some errors only appear at runtime.

For example:

Expand All @@ -87,14 +87,14 @@ var str = 'Hello world!';
console.log(str.notExistedMethod());
```

The above code has correct syntax and can be converted to AST correctly in the first stage of the engine runtime, but when it is actually running, because the method `notExistedMethod` does not exist on `String.prototype`, an error will be reported:
The above code has correct syntax and can be converted to AST correctly in the first stage of engine runtime, but when it actually runs, the method `notExistedMethod` does not exist on `String.prototype`, so an error is reported:

```bash
Uncaught TypeError: str.notExistedMethod is not a function
at <anonymous>:2:17
```

With the iteration of ECMAScript, new methods are added to built-in objects. For example, `String.prototype.replaceAll` was introduced in ES2021. The `replaceAll` method doesn't exist in the built-in object `String.prototype` of most browser engines before 2021, so the following code works in the latest Chrome but not in earlier versions:
With ECMAScript iterations, new methods are added to built-in objects. For example, `String.prototype.replaceAll` was introduced in ES2021. The `replaceAll` method doesn't exist in `String.prototype` of most browser engines before 2021, so the following code works in the latest Chrome but not in earlier versions:

```js
'abc'.replaceAll('abc', 'xyz');
Expand Down
8 changes: 4 additions & 4 deletions website/docs/en/guide/basic/html-template.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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 your project has only one page, use the `html.title` setting directly:
When your project has only one page, set `html.title` directly:

```ts title="rsbuild.config.ts"
export default {
Expand All @@ -78,7 +78,7 @@ export default {
```

:::tip
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).
For single-page applications (SPA), Rsbuild includes an initial title in the HTML page, but you typically need to dynamically update the page title when routes change, for example using routing libraries or libraries like [React Helmet](https://github.com/nfl/react-helmet).
:::

## Set page icon
Expand Down Expand Up @@ -142,9 +142,9 @@ The generated meta tag in HTML is:

## Default template engine

Rsbuild has a built-in default template engine for handling HTML template files. Its syntax is similar to a subset of EJS, with some differences. When an HTML template file has a `.html` extension, Rsbuild will use the built-in template engine to parse it.
Rsbuild has a built-in default template engine for processing HTML template files. Its syntax is similar to a subset of EJS, with some differences. When an HTML template file has a `.html` extension, Rsbuild will use the built-in template engine to parse it.

For example, if a `text` param is defined in the template with the value `'world'`, Rsbuild will automatically replace `<%= text %>` with the specified value during the build process.
For example, if a `text` parameter is defined in the template with the value `'world'`, Rsbuild will automatically replace `<%= text %>` with the specified value during the build.

```html
<!-- Input -->
Expand Down
4 changes: 2 additions & 2 deletions website/docs/en/guide/faq/general.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ The main differences between Rspack and Rsbuild are:

- Rspack projects need to be configured from scratch, while Rsbuild provides default best practice configurations and supports extending Rspack configurations.
- Rspack projects require integration with loaders and plugins from the community to support different scenarios, while Rsbuild provides official plugins and default support for common frontend frameworks and build capabilities.
- The capabilities of Rspack CLI are comparable to webpack CLI, with relatively streamlined functionality, while Rsbuild provides a more powerful CLI and more complete dev server.
- The capabilities of Rspack CLI are comparable to webpack CLI, with relatively streamlined functionality, while Rsbuild provides a more powerful CLI and a more complete dev server.

---

Expand All @@ -27,5 +27,5 @@ Modern.js is a progressive web development framework built on top of Rsbuild. Mo
The main differences between Modern.js and Rsbuild are:

- Modern.js is based on React, while Rsbuild is not coupled with any frontend UI framework.
- Modern.js is a full-stack solution, providing runtime and server-side capabilities, while Rsbuild is a build tool with other capabilities extendable via plugins.
- Modern.js is a full-stack solution providing runtime and server-side capabilities, while Rsbuild is a build tool with other capabilities extensible via plugins.
- Modern.js has more built-in features, while Rsbuild focuses on being lightweight and flexible.
28 changes: 14 additions & 14 deletions website/docs/en/guide/start/index.mdx
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
# Introduction

Rsbuild is a high-performance build tool powered by Rspack. It provides carefully designed default build configurations that deliver an out-of-the-box development experience while fully leveraging Rspack's performance advantages.
Rsbuild is a high-performance build tool powered by Rspack. It provides carefully designed default build configurations that deliver an out-of-the-box development experience while taking full advantage of Rspack's performance.

Rsbuild provides [rich build features](/guide/start/features), including compilation of TypeScript, JSX, Sass, Less, CSS Modules, Wasm, and more. It also supports Module Federation, image compression, type checking, PostCSS, Lightning CSS, and additional features.

## 🚀 Performance

Powered by Rspack's Rust-based architecture, Rsbuild delivers blazing fast performance that will reshape your development workflow.
Powered by Rspack's Rust-based architecture, Rsbuild delivers blazing-fast performance that will reshape your development workflow.

⚡️ **Build 1000 React components:**

Expand All @@ -18,39 +18,39 @@ import { BenchmarkGraph } from '@components/Benchmark';

## 💡 Comparisons

Rsbuild is a build tool on par with [Vite](https://vitejs.dev/), [Create React App](https://github.com/facebook/create-react-app), and [Vue CLI](https://github.com/vuejs/vue-cli). All come with built-in dev servers, command line tools, and sensible build configurations for an out-of-the-box experience.
Rsbuild is a build tool on par with [Vite](https://vitejs.dev/), [Create React App](https://github.com/facebook/create-react-app), and [Vue CLI](https://github.com/vuejs/vue-cli). All include built-in dev servers, command line tools, and sensible build configurations for an out-of-the-box experience.

![](https://assets.rspack.rs/rsbuild/assets/rsbuild-1-0-build-tools.png)

### CRA / Vue CLI

You can think of Rsbuild as a modernized version of Create React App or Vue CLI, with these key differences:

- The underlying bundler has switched from webpack to Rspack, delivering 5 to 10 times better build performance.
- It's decoupled from frontend UI frameworks and supports all UI frameworks via [plugins](/plugins/list/index), including React, Vue, Svelte, Solid, and more.
- It provides better extensibility. You can extend Rsbuild flexibly through [Configurations](/config/index), [Plugin API](/plugins/dev/index), and [JavaScript API](/api/start/index).
- The underlying bundler has been switched from webpack to Rspack, delivering 5 to 10 times better build performance.
- It's decoupled from frontend UI frameworks and supports all frameworks via [plugins](/plugins/list/index), including React, Vue, Svelte, Solid, and more.
- It provides better extensibility. You can flexibly extend Rsbuild through [configurations](/config/index), [Plugin API](/plugins/dev/index), and [JavaScript API](/api/start/index).

### Vite

Rsbuild shares many similarities with Vite, as both aim to improve the frontend development experience. The main differences are:
Rsbuild has many similarities to Vite, as both aim to improve the frontend development experience. The main differences are:

- **Production consistency**: Rsbuild uses Rspack for bundling in both development and production builds, ensuring high consistency between development and production outputs. Vite uses ESM for module loading during development, improving startup speed but potentially causing inconsistencies between development and production outputs.
- **Ecosystem compatibility**: Rsbuild is compatible with most webpack plugins and all Rspack plugins, while Vite is compatible with Rollup plugins. If you're currently using many plugins and loaders from the webpack ecosystem, migrating to Rsbuild is relatively straightforward.
- **Production consistency**: Rsbuild uses Rspack for bundling in both development and production builds, ensuring high consistency between development and production outputs. Vite uses ESM during development for faster startup, but this can potentially cause inconsistencies between development and production outputs.
- **Ecosystem compatibility**: Rsbuild is compatible with most webpack plugins and all Rspack plugins, while Vite is compatible with Rollup plugins. If you're using many plugins and loaders from the webpack ecosystem, migrating to Rsbuild is more straightforward.
- **Module Federation**: The Rsbuild team works closely with the [Module Federation](/guide/advanced/module-federation) development team, providing first-class support for Module Federation to help you develop large web applications with micro frontend architecture.

## 🔥 Features

Rsbuild has the following features:

- **Easy to Configure**: One of Rsbuild's goals is to provide out-of-the-box build capabilities for Rspack users, allowing developers to start web projects with zero configuration. Additionally, Rsbuild provides semantic build configuration to reduce the learning curve for Rspack configuration.
- **Easy to configure**: One of Rsbuild's goals is to provide out-of-the-box build capabilities for Rspack users, allowing developers to start web projects with zero configuration. Additionally, Rsbuild provides semantic build configuration to reduce the learning curve for Rspack.

- **Performance Oriented**: Rsbuild integrates high-performance Rust-based tools from the community, including [Rspack](https://rspack.rs), [SWC](https://swc.rs/) and [Lightning CSS](https://lightningcss.dev/), delivering first-class build speed and development experience.
- **Performance oriented**: Rsbuild integrates high-performance Rust-based tools from the community, including [Rspack](https://rspack.rs), [SWC](https://swc.rs/), and [Lightning CSS](https://lightningcss.dev/), delivering first-class build speed and development experience.

- **Plugin Ecosystem**: Rsbuild has a lightweight plugin system and includes a range of high-quality official plugins. Furthermore, Rsbuild is compatible with most webpack plugins and all Rspack plugins, allowing users to leverage existing community or in-house plugins in Rsbuild without rewriting code.
- **Plugin ecosystem**: Rsbuild has a lightweight plugin system and includes a range of high-quality official plugins. Furthermore, Rsbuild is compatible with most webpack plugins and all Rspack plugins, allowing you to use existing community or in-house plugins without rewriting code.

- **Stable Artifacts**: Rsbuild places a strong focus on build artifact stability. It ensures high consistency between artifacts in development and production builds, and automatically handles syntax downgrading and polyfill injection. Rsbuild also provides plugins for type checking and artifact syntax validation to prevent quality and compatibility issues in production code.
- **Stable artifacts**: Rsbuild places a strong focus on build artifact stability. It ensures high consistency between artifacts in development and production builds, and automatically handles syntax downgrading and polyfill injection. Rsbuild also provides plugins for type checking and artifact syntax validation to prevent quality and compatibility issues in production code.

- **Framework Agnostic**: Rsbuild is not coupled to any frontend UI framework. It supports frameworks like React, Vue, Svelte, Solid, and Preact through plugins, with plans to support more UI frameworks from the community in the future.
- **Framework agnostic**: Rsbuild is not coupled to any frontend UI framework. It supports frameworks like React, Vue, Svelte, Solid, and Preact through plugins, with plans to support more UI frameworks from the community in the future.

## 🦀 Rstack

Expand Down
Loading
Loading