Features
Here are all the main features supported by Rsbuild.
JavaScript
| Features | Description | Links |
|---|---|---|
| Rspack bundler | Use Rspack as the bundler by default | - |
| SWC compilation | Transform and minify JavaScript and TypeScript code with SWC by default | - |
| TS compilation | TS files are compiled by SWC by default | |
| Code minification | Code minification is enabled by default in production build | |
| Polyfill injection | core-js and other polyfills are injected by default | |
| SourceMap generation | Source maps are generated during development by default | |
| Alias | Optional feature, set import alias | |
| Babel compilation | Optional feature, use Babel to transform JavaScript and TypeScript code | |
| Node outputs | Optional feature, support building bundles that run in Node.js environment | |
| Web Worker outputs | Optional feature, support building bundles that run in a Web Worker environment | |
| Browserslist | Optional feature, using browserslist (opens new window) to specify which browsers should be supported in your Web application. | |
| Compatibility check | Optional feature, analyze if there are incompatible advanced syntax in the outputs within the current browser scope | |
| Environment variable | Optional feature, inject environment variables or expressions into the code | |
| Node Polyfill | Optional feature, inject polyfills for Node core modules on the browser side | |
| Type check | Optional feature, run type checker to check for type issues in code | |
| Module Federation | Optional feature, dynamically load modules and share dependencies |
CSS
| Features | Description | Links |
|---|---|---|
| PostCSS compilation | PostCSS compilation is enabled by default, built-in autoprefixer plugin | |
| Sass preprocessing | Support compile Sass files by default | |
| Less preprocessing | Support compile Less files by default | |
| Stylus preprocessing | Optional feature, compile Stylus files | |
| CSS Modules compilation | Support compiling *.module.* files by default |
|
| CSS Modules type | Optional feature, automatically generate type definition for CSS Modules | |
| CSS minification | CSS minification is enabled by default in production build | |
| Styled Components | Optional feature, Support styled components compilation | |
| Inline CSS into JS | Optional feature, inline CSS files to JavaScript files | |
| Rem unit conversion | Optional feature, convert px units in CSS to rem units | |
| Lightning CSS | Optional feature, use Lightning CSS to improve compile performance |
HTML
| Features | Description | Links |
|---|---|---|
| Set title | Set HTML title tag | |
| Set meta | Set HTML meta tag | |
| Set favicon | Set favicon for page | |
| Set app icon | Set apple icon for iOS | |
| Use EJS template engine | Optional feature, use EJS template engine | |
| Use Pug template engine | Optional feature, use pug template engine | |
| Inline JS files | Optional feature, inline JS files into HTML | |
| Inline CSS files | Optional feature, inline CSS files into HTML |
Development and Preview
| Features | Description | Links |
|---|---|---|
| Public Dir | Use the public directory as the directory for serving public assets by default | |
| Proxy | Optional feature, proxy requests to the specified service | |
| Open page | Optional feature, automatically open page in browser when starting server | |
| HTTPS | Optional feature, enable HTTPS server |
Frontend Framework
| Features | Description | Links |
|---|---|---|
| React | Optional feature, enable compilation of React JSX | |
| React Refresh | Optional feature, enable React Refresh | |
| SVGR | Optional feature, transform SVG to React component | |
| Vue 3 SFC | Optional feature, enable compilation of Vue 3 SFC (Single File Components) | |
| Vue 3 JSX | Optional feature, enable compilation of Vue 3 JSX syntax | |
| Vue 2 SFC | Optional feature, enable compilation of Vue 2 SFC (Single File Components) | |
| Vue 2 JSX | Optional feature, enable compilation of Vue 2 JSX syntax | |
| Svelte | Optional feature, enable compilation of Svelte component | |
| Solid | Optional feature, enable compilation of Solid JSX |
Static Assets
| Features | Description | Links |
|---|---|---|
| Import image assets | Support for import image assets in code | |
| Import font assets | Support for import font assets in code | |
| Import video assets | Support for import video assets in code | |
| Import Wasm assets | Support for import WebAssembly assets in code | |
| Import node addons | Support for import Node.js addons in code | - |
| Inline static assets | Small assets are inlined into JS by default | |
| Clean up static assets | Automatically clean up static assets in the dist directory before each build | |
| Copy static assets | Optional feature, copy static assets to the dist directory |
Performance
| Features | Description | Links |
|---|---|---|
| Chunk Splitting | A variety of chunk splitting strategies are built into Rsbuild to automatically split the bundle into files of moderate size | |
| Print File Size | After the production build, All bundle sizes is displayed by default | |
| Analyze bundle size | Optional feature, analyze bundle size through Bundle Analyzer | |
| Remove console | Optional feature, remove console.[methodName] in code |
|
| Optimize moment.js size | Optional feature, remove the redundant locale files of moment.js | |
| Component on-demand import | Optional feature, selectively import code and styles from component libraries | |
| Image compression | Optional feature, compress used image resources | |
| Preload | Optional feature, preemptively fetch and cache the target resource for current navigation | |
| Prefetch | Optional feature, preemptively fetch and cache the target resource for a followup navigation | |
| Preconnect | Optional feature, preemptively connect to the target resource's origin | |
| DNS prefetch | Optional feature, preemptively perform DNS resolution for the target resource's origin |
ON THIS PAGE