#Announcing Rsbuild 2.1

June 26, 2026

Jiahan Chen

@chenjiahan

We are pleased to announce the official release of Rsbuild 2.1!

The main improvements in 2.1 include:

• Framework and ecosystem:
  • Upgrade to Rspack 2.1
  • Rust-based React Compiler
  • TanStack Start support
  • Tailwind CSS plugin
• New features:
  • Automatic externals
  • Parallel Babel and SVGR
• Resource imports:
  • CSS URL imports
  • Worker query imports
  • Wasm source import

#Upgrade to Rspack 2.1

Rsbuild 2.1 is powered by Rspack 2.1. This brings faster builds, the Rust implementation of React Compiler, new output optimization capabilities, and many improvements under the hood.

For more details, see the Rspack 2.1 announcement post.

#Rust-based React Compiler

React Compiler can automatically optimize React components and Hooks at build time. Previously, React Compiler was primarily integrated through a Babel plugin, which introduced additional Babel transform overhead and increased build time.

Rspack 2.1 includes the Rust implementation of React Compiler, and Rsbuild 2.1 exposes this capability through @rsbuild/plugin-react. You can now enable the reactCompiler option in the React plugin to use React Compiler.

When measuring only the additional compilation time introduced by React Compiler, our benchmarks show that the Rust implementation is 7-13x faster than the Babel implementation.

import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';

export default defineConfig({
  plugins: [
    pluginReact({
      reactCompiler: true,
    }),
  ],
});

For projects using React 17 or React 18, you need to install react-compiler-runtime and explicitly set the target React version for React Compiler:

pluginReact({
  reactCompiler: {
    target: '18',
  },
});

For more options, see the React plugin documentation.

#TanStack Start support

TanStack Start is a full-stack React framework powered by TanStack Router. It provides full-document SSR, streaming rendering, Server Functions, client and server builds, and more.

In the Rsbuild 2.0 announcement, we mentioned that we were working with the TanStack team to explore an integration. TanStack Start now officially supports using Rsbuild as the build tool. You can keep using familiar Rsbuild configuration and plugins, and only need to add the TanStack Start plugin:

import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { tanstackStart } from '@tanstack/react-start/plugin/rsbuild';

export default defineConfig({
  plugins: [pluginReact(), tanstackStart()],
});

See the TanStack Start blog or the guide for more details.

#Tailwind CSS plugin

Rsbuild now provides the Tailwind CSS plugin for integrating Tailwind CSS v4 with Rsbuild. The plugin is built on top of Tailwind CSS's official @tailwindcss/webpack loader.

Compared with using @tailwindcss/postcss, this avoids running Tailwind CSS compilation through PostCSS. In our tests, it improved build performance by up to 30%.

import { defineConfig } from '@rsbuild/core';
import { pluginTailwindcss } from '@rsbuild/plugin-tailwindcss';

export default defineConfig({
  plugins: [pluginTailwindcss()],
});

#Automatic externals

When building Node.js applications or SSR output, some dependencies are not suitable for bundling. Examples include observability SDKs, native addons, packages that require runtime instrumentation, or peer dependencies that should be provided by the host application. In the past, these cases usually required manual output.externals configuration.

Rsbuild now supports the output.autoExternal option. It reads dependency fields from package.json and automatically generates external rules. This capability was previously used mainly in Rslib, and can now be used directly in Rsbuild applications.

export default {
  output: {
    target: 'node',
    autoExternal: true,
  },
};

#Parallel Babel and SVGR

Babel and SVGR both provide flexible transformation capabilities, but they can be relatively expensive to run. When a project has many modules that need Babel processing, or needs to convert many SVG files into React components, this overhead can become significant.

@rsbuild/plugin-babel and @rsbuild/plugin-svgr now provide the parallel option. This option uses Rspack's parallel loader to distribute transformation tasks to worker threads, reducing pressure on the main thread and improving overall build performance.

import { pluginBabel } from '@rsbuild/plugin-babel';
import { pluginSvgr } from '@rsbuild/plugin-svgr';

export default {
  plugins: [
    pluginBabel({
      parallel: true,
    }),
    pluginSvgr({
      parallel: true,
    }),
  ],
};

Options passed to worker threads must be structured-cloneable. If you pass functions in Babel or SVGR options, keep using the default serial mode, or rewrite that logic as serializable configuration.

#CSS URL imports

Rsbuild now supports CSS ?url imports to access the URL of a compiled CSS file. When importing a stylesheet with ?url, Rsbuild runs the full CSS compilation pipeline and emits the result as a separate asset. In JavaScript, you receive the final CSS file URL, and the stylesheet is not automatically injected into the page.

This is useful when runtime code needs to decide when to load styles, such as in micro-frontends, theme customization, or Web Components.

import darkThemeUrl from './dark-theme.css?url';

const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = darkThemeUrl;
document.head.appendChild(link);

#Worker query imports

Rsbuild now supports importing a Worker constructor directly with the ?worker query. This lets Worker scripts be imported like regular modules, making it easier to preserve the existing code structure when migrating from tools such as Vite.

import MyWorker from './worker.js?worker';

const worker = new MyWorker();

worker.onmessage = (event) => {
  console.log(event.data);
};

worker.postMessage(10);

By default, Worker scripts are emitted as separate chunks in production builds. If you want to inline the Worker code into the main bundle, add the inline query:

import InlineWorker from './worker.js?worker&inline';

const worker = new InlineWorker();

For scenarios that require the full WorkerOptions object, such as type: 'module' or credentials: 'include', we still recommend using the standard Worker constructor syntax.

#Wasm source import

Rsbuild 2.1 supports the import source syntax from the Source Phase Imports proposal, allowing you to obtain the compiled WebAssembly.Module directly.

Unlike a regular import, which returns the Wasm module's exports directly, import source is better suited for scenarios where you need to instantiate the module manually, provide different imports, create multiple instances, or pass the module to a Worker.

import source wasmModule from './add.wasm';

const instance = await WebAssembly.instantiate(wasmModule);
const { add } = instance.exports;

console.log(add(1, 2)); // 3

#Upgrade

If you are already using Rsbuild 2.0, you only need to upgrade the relevant @rsbuild/* packages to version 2.1. For more details, see Upgrade Rsbuild.