Configs2026年5月10日·1 分钟阅读

Rsbuild — Fast Extensible Build Tool for Modern Web

An Rspack-powered build tool that provides out-of-the-box support for TypeScript, JSX, CSS Modules, and more with minimal configuration.

Introduction

Rsbuild is a high-performance build tool for web applications, powered by Rspack (a Rust-based webpack-compatible bundler). It provides sensible defaults for TypeScript, JSX, CSS, and static assets so you can start building without writing a config file. Rsbuild is developed by the ByteDance web-infra team as the recommended way to use Rspack for application development.

What Rsbuild Does

  • Bundles web applications using Rspack with pre-configured loaders for common file types
  • Provides a fast dev server with hot module replacement and proxy support
  • Handles TypeScript, JSX, CSS Modules, Sass, Less, and image optimization out of the box
  • Supports multiple output environments: browser, Node.js SSR, and web workers
  • Offers a plugin API for extending build behavior without touching Rspack config directly

Architecture Overview

Rsbuild sits on top of Rspack, providing a higher-level configuration API and a curated set of built-in plugins. When you run a build, Rsbuild translates its config into Rspack configuration, applying plugins for HTML generation, CSS extraction, asset optimization, and code splitting. The dev server is built on Rspack's native dev middleware for fast rebuilds. Because Rspack itself is written in Rust, build times are significantly faster than webpack-based alternatives.

Self-Hosting & Configuration

  • Scaffold a project with npm create rsbuild@latest and choose a template (React, Vue, Vanilla, etc.)
  • Configure via rsbuild.config.ts with a typed API covering source, output, dev server, and plugins
  • Override Rspack configuration directly through the tools.rspack option when needed
  • Add official plugins for React Fast Refresh, Vue SFC support, Svelte, and more
  • Integrate with existing monorepos by setting source.entry and output.distPath per package

Key Features

  • Near-instant startup and rebuilds thanks to Rspack's Rust-based compilation pipeline
  • Zero-config defaults for TypeScript, PostCSS, CSS Modules, and environment variables
  • Built-in support for Module Federation for micro-frontend architectures
  • Performance analysis with bundle-stats and Rsdoctor integration for identifying bottlenecks
  • Backward-compatible with much of the webpack plugin and loader ecosystem

Comparison with Similar Tools

  • Vite — uses native ESM in dev and Rollup for production; Rsbuild uses Rspack for both, offering more consistent dev/prod behavior
  • webpack — highly configurable but slow; Rsbuild provides the same ecosystem compatibility with Rust-powered speed
  • Rspack (direct) — lower-level bundler API; Rsbuild adds preconfigured defaults and a plugin system
  • Turbopack — Vercel's Rust bundler tightly coupled with Next.js; Rsbuild is framework-agnostic
  • esbuild — extremely fast but limited plugin/loader ecosystem; Rsbuild supports the full webpack loader ecosystem via Rspack

FAQ

Q: How fast is Rsbuild compared to webpack? A: Rspack benchmarks show 5-10x faster builds than webpack for typical projects, and Rsbuild inherits that speed.

Q: Can I migrate from webpack to Rsbuild? A: Yes. Rspack is designed to be webpack-compatible. Most webpack loaders and many plugins work without modification.

Q: Does Rsbuild support React and Vue? A: Yes. Official plugins provide React Fast Refresh, Vue SFC compilation, and Svelte support.

Q: Is Rsbuild production-ready? A: Yes. It is used in production at ByteDance and other organizations, with active releases and documentation.

Sources

讨论

登录后参与讨论。
还没有评论,来写第一条吧。

相关资产