close
logologo
Guide
Config
Plugin
API
Community
Version
Changelog
Rsbuild 0.x Doc
English
简体中文
Guide
Config
Plugin
API
Community
Changelog
Rsbuild 0.x Doc
English
简体中文
logologo

Getting Started

Introduction
Quick start
Features
Glossary

Framework

React
Vue
Preact
Svelte
Solid

Basic

CLI
Dev server
Output files
Static assets
HTML
JSON
Wasm
TypeScript
Web Workers
Deploy static site
Upgrade Rsbuild

Configuration

Configure Rspack
Configure Rsbuild
Configure SWC

Styling

CSS
CSS Modules
CSS-in-JS
Tailwind CSS v4
Tailwind CSS v3
UnoCSS

Advanced

Path aliases
Environment variables
Hot module replacement
Browserslist
Browser compatibility
Module Federation
Multi-environment builds
Server-side rendering (SSR)
Testing

Optimization

Code splitting
Bundle size optimization
Improve build performance
Inline static assets

Migration

Migrating from Rsbuild 0.x
webpack
Create React App
Vue CLI
Vite
Vite plugin
Modern.js Builder

Debug

Debug mode
Build profiling
Use Rsdoctor

FAQ

General FAQ
Features FAQ
Exceptions FAQ
HMR FAQ
📝 Edit this page on GitHub
Next PageQuick start

#Introduction

Rsbuild is a high-performance build tool powered by Rspack. It provides a thoughtfully designed default build configuration for an out-of-the-box development experience that fully unleashes Rspack's performance advantages.

Rsbuild provides rich build features, including compilation of TypeScript, JSX, Sass, Less, CSS Modules, and Wasm. It also supports Module Federation, image compression, type checking, PostCSS, Lightning CSS, and more.

#🚀 Performance

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

⚡️ Build 1000 React components:

Rsbuild

0ms dev
0ms build
0ms hmr

Vite + SWC

0.00s dev
0.00s build
0ms hmr

webpack + SWC

0.00s dev
0.00s build
0ms hmr

webpack + Babel

0.00s dev
0.00s build
0ms hmr

📊 Benchmark results from build-tools-performance.

#💡 Comparisons

Rsbuild is a build tool on par with Vite, Create React App, and Vue CLI. All provide built-in dev servers, command line tools, and sensible build configurations for an out-of-the-box experience.

#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, including React, Vue, Svelte, Solid, and more.
  • It provides better extensibility. You can extend Rsbuild flexibly through Configurations, Plugin API, and JavaScript API.

#Vite

Rsbuild shares many similarities with 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, 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.
  • 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.
  • Module Federation: The Rsbuild team works closely with the 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 a web project with zero configuration. Additionally, Rsbuild provides semantic build configuration to reduce the learning curve for Rspack configuration.

  • Performance Oriented: Rsbuild integrates high-performance Rust-based tools from the community, including Rspack, SWC, and Lightning CSS, 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.

  • Stable Artifacts: Rsbuild focuses strongly on build artifact stability. It ensures high consistency between artifacts in development and production, 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.

#🦀 Rstack

Rstack is a unified JavaScript toolchain centered on Rspack, with high performance and consistent architecture.

Rstack

Rstack includes the following tools:

NameDescriptionVersion
RspackBundlernpm version
RsbuildBuild toolnpm version
RslibLibrary development toolnpm version
RspressStatic site generatornpm version
RsdoctorBuild analyzernpm version
RstestTesting frameworknpm version
RslintLinternpm version

#🔗 Links

  • awesome-rstack: A curated list of awesome things related to Rstack.
  • rstack-examples: Examples showcasing Rstack tools.
  • storybook-rsbuild: Storybook builder powered by Rsbuild.
  • rsbuild-plugin-template: Use this template to create your own Rsbuild plugin.
  • rstack-design-resources: Design resources for Rstack.

#🧑‍💻 Community

Come and chat with us on Discord! The Rstack team and users are active there, and we're always looking for contributions.

#✨ Next step

You may want:

Quick start

Learn how to use Rsbuild

All features

Learn all features of Rsbuild

Support Rsbuild

Support us with a star ⭐️