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
Previous PageQuick start
Next PageGlossary

#Features

All the main features that Rsbuild supports.

#JavaScript

FeaturesDescriptionLinks
RspackUse Rspack as the bundler by default
  • Configure Rspack
SWC compilationTransform and minify JavaScript and TypeScript code using SWC by default
  • Configure SWC
TS compilationTypeScript files are compiled using SWC by default
  • TypeScript compilation
Code minificationCode minification is enabled by default in production mode
  • output.minify
Polyfill injectionOptional feature, inject core-js and other polyfills
  • Browser compatibility
  • output.polyfill
SourceMap generationSource maps are generated in development mode by default
  • output.sourceMap
AliasOptional feature, set import alias
  • resolve.alias
Babel compilationOptional feature, use Babel to transform JavaScript and TypeScript code
  • Babel plugin
Node outputsOptional feature, build bundles that run in Node.js environment
  • Node target
Web WorkersOptional feature, use Web Workers
  • Web Workers
BrowserslistOptional feature, use browserslist to specify which browsers should be supported in your web application.
  • Browserslist
Compatibility checkOptional feature, analyze if there are incompatible advanced syntax in the outputs within the current browser scope
  • @rsbuild/plugin-check-syntax
Environment variableOptional feature, inject environment variables or expressions into the code
  • Environment variables
Node polyfillOptional feature, inject polyfills for Node core modules on the browser side
  • Node polyfill plugin
Type checkOptional feature, run type checker to check for type issues in code
  • Type checking
Module FederationOptional feature, dynamically load modules and share dependencies
  • Module Federation

#CSS

FeaturesDescriptionLinks
Lightning CSSUse Lightning CSS to downgrade CSS syntax by default
  • CSS
PostCSS transformationOptional feature, use PostCSS to transform CSS files
  • CSS
  • tools.postcss
Tailwind CSSOptional feature, use Tailwind CSS
  • Tailwind CSS
UnoCSSOptional feature, use UnoCSS
  • UnoCSS
Sass preprocessingOptional feature, compile Sass/Scss files
  • CSS
  • Sass plugin
Less preprocessingOptional feature, compile Less files
  • CSS
  • Less plugin
Stylus preprocessingOptional feature, compile Stylus files
  • CSS
  • Stylus plugin
CSS Modules compilationSupport compiling *.module.* files by default
  • CSS Modules
  • tools.cssLoader
CSS Modules typeOptional feature, generate type definition for CSS Modules
  • Typed CSS Modules plugin
CSS minificationCSS minification is enabled by default in production build
  • CSS
Inline CSS into JSOptional feature, inline CSS files to JavaScript files
  • CSS
  • output.injectStyles

#HTML

FeaturesDescriptionLinks
Set titleSet HTML <title> tag
  • Set page title
  • html.title
Set metaSet HTML <meta> tag
  • Set meta tags
  • html.meta
Set faviconSet favicon
  • Set page icon
  • html.favicon
Set app iconSet web application icons
  • Set page icon
  • html.appIcon
EJS template engineOptional feature, use EJS template engine
  • HTML template - EJS
Pug template engineOptional feature, use pug template engine
  • Pug plugin
Inline JS filesOptional feature, inline JS files into HTML
  • Inline static assets
  • output.inlineScripts
Inline CSS filesOptional feature, inline CSS files into HTML
  • Inline static assets
  • output.inlineStyles

#Server

FeaturesDescriptionLinks
Public dirUse the public directory as the directory for serving public assets by default
  • server.publicDir
SSROptional feature, implement server-side rendering
  • SSR
ProxyOptional feature, proxy requests to the specified service
  • server.proxy
Open pageOptional feature, automatically open page in browser when starting server
  • server.open
HTTPSOptional feature, enable HTTPS server
  • server.https
Custom middlewareOptional feature, use custom middleware
  • Middleware

#UI framework

FeaturesDescriptionLinks
ReactOptional feature, enable compilation of React JSX
  • React plugin
React RefreshOptional feature, enable React Refresh
  • Hot module replacement
  • dev.hmr
SVGROptional feature, transform SVG to React component
  • SVGR plugin
Vue 3 SFCOptional feature, enable compilation of Vue 3 SFC (Single File Components)
  • Vue plugin
Vue 3 JSXOptional feature, enable compilation of Vue 3 JSX syntax
  • Vue JSX plugin
Vue 2 SFCOptional feature, enable compilation of Vue 2 SFC (Single File Components)
  • Vue 2 plugin
Vue 2 JSXOptional feature, enable compilation of Vue 2 JSX syntax
  • Vue 2 JSX plugin
SvelteOptional feature, enable compilation of Svelte component
  • Svelte plugin
SolidOptional feature, enable compilation of Solid JSX
  • Solid plugin

#Static assets

FeaturesDescriptionLinks
Image assetsSupport for import image assets in code
  • Static assets
Font assetsSupport for import font assets in code
  • Static assets
Video assetsSupport for import video assets in code
  • Static assets
Wasm assetsSupport for import WebAssembly assets in code
  • Static assets
Node addonsSupport for import Node.js addons in code
  • Static assets
Inline static assetsSmall assets are inlined into JS by default
  • Inline static assets
  • output.dataUriLimit
Clean up static assetsAutomatically clean up static assets in the dist directory before each build
  • output.cleanDistPath
Copy static assetsOptional feature, copy static assets to the dist directory
  • output.copy
Generate manifest fileOptional feature, generate manifest.json file
  • output.manifest

#Performance and debugging

FeaturesDescriptionLinks
Chunk splittingA variety of chunk splitting strategies are built into Rsbuild to automatically split the bundle into files of moderate size
  • Code splitting
  • performance.chunkSplit
Print file sizeAfter the production build, all bundle sizes are displayed by default
  • performance.printFileSize
Analyze build processOptional feature, use Rsdoctor to analyze build process
  • Use Rsdoctor
Analyze bundle sizeOptional feature, analyze bundle size through Bundle Analyzer
  • performance.bundleAnalyze
Remove consoleOptional feature, remove console.[methodName] in code
  • performance.removeConsole
Optimize moment.js sizeOptional feature, remove the redundant locale files of moment.js
  • performance.removeMomentLocale
Dedupe packagesOptional feature, remove duplicate npm packages
  • resolve.dedupe
Component on-demand importOptional feature, selectively import code and styles from component libraries
  • source.transformImport
Image compressionOptional feature, compress used image resources
  • Image compress plugin
PreloadOptional feature, preemptively fetch and cache the target resource for current navigation
  • performance.preload
PrefetchOptional feature, preemptively fetch and cache the target resource for a followup navigation
  • performance.prefetch
PreconnectOptional feature, preemptively connect to the target resource's origin
  • performance.preconnect
DNS prefetchOptional feature, preemptively perform DNS resolution for the target resource's origin
  • performance.dnsPrefetch