June 26, 2025

#Announcing Rspack 1.4

Rspack 1.4 has been released!

Notable changes:

• New features
  • Running in the browser
  • Faster SWC
  • Smaller bundles
  • Incremental build by default
  • New CssChunkingPlugin
  • Enhanced lazy compilation
  • Custom input file system
  • Performance analysis tool
• Rstack progress
  • Rsbuild 1.4
  • Rslib 0.10
  • Rspress 2.0 beta
  • Rsdoctor MCP
  • Rstest released
• Ecosystem
  • next-rspack
  • Kmi
• Upgrade guide

#New features

#Running in the browser

Starting with Rspack 1.4, we have added Wasm target support, which means Rspack can now run in browser environments, including online platforms like StackBlitz (WebContainers). This enables developers to quickly create prototypes and share code examples without having to configure local environments.

You can try out our online example directly, or learn about the StackBlitz usage guide in this documentation.

In future versions, we will continue to optimize the Wasm version's usability and bundle size.

We are also developing the @rspack/browser package, which is a browser-specific version of Rspack, allowing you to use Rspack directly in any modern browser without relying on WebContainers or specific platforms.

#Faster SWC

Over the past few months, we have been continuously collaborating with the SWC team to optimize the performance and reliability of the JavaScript toolchain. After a period of optimization, we are pleased to see that SWC's performance has improved significantly, benefiting both Rspack users and all SWC-based tools:

• JavaScript parser is 30%-35% faster
• JavaScript minifier is 10% faster

The above data is from: CodSpeed - SWC, compared against SWC 16 used by Rspack 1.3 as the baseline.

#Smaller bundles

SWC has enhanced its dead code elimination (DCE) capabilities in the current version, which combined with Rspack's powerful tree shaking functionality, enables Rspack 1.4 to generate smaller bundles.

We tested this using react-router as an example: by importing only part of its exports in the source code and then comparing the build outputs from different bundlers, we found that Rspack generates the smallest bundles.

import { BrowserRouter, Routes, Route } from 'react-router';

console.log(BrowserRouter, Routes, Route);

The output bundle sizes by different bundlers are as follows:

Data from react-router-tree-shaking-compare.

#Incremental build by default

After extensive optimization, Rspack's incremental build has become stable. In Rspack 1.4, we've enabled incremental build for all phases by default, which significantly speeds up rebuilds - HMR performance typically improves by 30%-40%, depending on the project.

Here is a performance comparison from one user after enabling incremental build:

If you need to revert to the previous behavior, you can set experiments.incremental to 'safe'. However, we recommend that most projects use the new default configuration to achieve optimal performance.

export default {
  experiments: {
    // Revert to previous behavior
    incremental: 'safe',
  },
};

#New CssChunkingPlugin

Rspack 1.4 introduces an experimental CssChunkingPlugin specifically designed for handling CSS code splitting. This plugin ensures that styles are loaded in the same order as they are imported in the source code, preventing UI issues caused by incorrect CSS loading order.

import { rspack } from '@rspack/core';

export default {
  plugins: [
    new rspack.experiments.CssChunkingPlugin({
      // ...options
    }),
  ],
};

Once CssChunkingPlugin is enabled, CSS code splitting will be handled entirely by this plugin, and the optimization.splitChunks configuration will no longer affect CSS modules. You can check the documentation for more details.

This plugin is inspired by Next.js's CSS Chunking feature. Thanks to the Next.js team for their innovation in this area.

#Enhanced lazy compilation

Rspack now supports enabling lazy compilation with MultiCompiler, which means that when you use multiple Rspack configurations in a single build, you can independently configure the lazyCompilation options for each compiler instance.

export default [
  {
    target: 'web',
    experiments: {
      // enable lazy compilation for client
      lazyCompilation: true,
    },
  },
  {
    target: 'node',
    experiments: {
      // disable lazy compilation for server
      lazyCompilation: false,
    },
  },
];

#Custom input file system

Rspack now allows you to customize compiler.inputFileSystem (the compiler's input file system). This feature can be enabled by configuring experiments.useInputFileSystem. Typical use cases include:

• Using memfs instead of the default input file system in browsers.
• Working with the webpack-virtual-modules plugin to support virtual modules.

import VirtualModulesPlugin from 'webpack-virtual-modules';

export default {
  entry: './virtualEntry.js',
  plugins: [
    new VirtualModulesPlugin({
      'virtualEntry.js': `console.log('virtual entry')`,
    }),
  ],
  experiments: {
    useInputFileSystem: [/virtualEntry\.js$/],
  },
};

Since the custom inputFileSystem is implemented in JavaScript, it may lead to performance degradation. To mitigate this issue, useInputFileSystem allows you to pass an array of regular expressions to filter which files need to be read from the custom inputFileSystem, which avoids performance overhead caused by replacing the native file system.

In the future, we also plan to add built-in virtual module support in Rspack to provide better performance and user experience.

For detailed usage, see the documentation.

#Performance analysis tool

Rspack 1.4 introduces more precise tracing capabilities, which can be used for performance analysis based on perfetto to quickly identify build performance bottlenecks.

You can enable tracing through the RSPACK_PROFILE environment variable:

RSPACK_PROFILE=OVERVIEW rspack build

The generated rspack.pftrace file can be visualized and analyzed at ui.perfetto.dev:

For more detailed usage, see the Tracing documentation.

#Dependency upgrades

In Rspack 1.4, we have upgraded several major dependencies, including:

• Rspack now uses Zod v4 for configuration validation.
• create-rspack now provides Biome v2 as an optional linter and formatter.

#Rstack progress

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

#Rsbuild 1.4

Rsbuild 1.4 has been released alongside Rspack 1.4, with notable features including:

#Chrome DevTools integration

We've introduced a new rsbuild-plugin-devtools-json plugin, which enables seamless integration with Chrome DevTools' new Automatic Workspace Folders feature. This means you can directly edit and debug your source code in DevTools and save changes to your local file system.

#Improved query parameters

Rsbuild now has built-in support for .js?raw query parameters, allowing you to import the raw content of JavaScript, TypeScript, and JSX files as text. This is very useful in scenarios where you need to process code as strings (such as displaying code examples).

import rawJs from './script1.js?raw';
import rawTs from './script2.ts?raw';
import rawJsx from './script3.jsx?raw';

console.log(rawJs); // Raw content of JS file
console.log(rawTs); // Raw content of TS file
console.log(rawJsx); // Raw content of JSX file

#Improved browser compatibility

When you import JS files from other packages in a monorepo, Rsbuild now uses SWC to compile them by default, which helps avoid browser compatibility issues introduced by external dependencies.

As shown in the diagram below, suppose the app's build target is ES2016 and utils' build target is ES2021. When app/src/index.js imports utils/dist/index.js, SWC will now downgrade it to ES2016.

#Rslib 0.10

Rslib 0.10 has been released, with notable features including:

#ESM output optimization

Rslib now generates cleaner, more concise, and smaller ESM output by default.

#Building Vue UI libraries

By integrating the rsbuild-plugin-unplugin-vue plugin, you can use Rslib to generate bundleless builds for Vue UI libraries.

import { defineConfig } from '@rslib/core';
import { pluginUnpluginVue } from 'rsbuild-plugin-unplugin-vue';

export default defineConfig({
  plugins: [pluginUnpluginVue()],
  lib: [
    {
      format: 'esm',
      bundle: false,
      output: {
        target: 'web',
      },
    },
  ],
});

#Output IIFE format

Rslib now supports generating IIFE format output, wrapping the code in a function expression.

See the blog for more information about Rslib.

#Rspress 2.0 beta

We are actively developing Rspress 2.0 and have released multiple beta versions. Currently, we have completed most of the code refactoring work and have integrated Shiki by default in Rspress 2.0 to provide more powerful code highlighting features.

Additionally, we are developing a brand new theme, with the preview shown below:

#Rsdoctor MCP

Rsdoctor has introduced @rsdoctor/mcp-server, which combines LLMs to help you better analyze build data. It can access Rsdoctor's local build analysis data and provide intelligent analysis and optimization suggestions.

Rsdoctor MCP provides bundle analysis, dependency analysis, bundle optimization suggestions, and build optimization suggestions. It can analyze bundle size composition, dependency relationships, and duplicate dependencies, while providing targeted optimization suggestions for bundle size optimization, code splitting, and build performance.

#Rstest released

Rstest is a brand-new testing framework built on Rspack that provides comprehensive, first-class support for the Rspack ecosystem. It integrates seamlessly into existing Rspack projects and offers Jest-compatible APIs.

This month, we released Rstest v0.0.3, which provides initial support for Node.js and UI component testing, and has been adopted in our repositories like Rsbuild.

Rstest is currently in its early stages. We recommend staying tuned as we continue to enhance its testing capabilities to provide a more complete solution.

#Ecosystem

#next-rspack

Since Rspack joined the Next.js ecosystem, our primary goal has been to improve the stability and test coverage of next-rspack.

In the latest version, next-rspack has been largely completed, with test coverage reaching:

• Production builds 99.4%
• Development builds 98.4%

Moving forward, we plan to continue pushing test coverage to 100% and further optimize the performance of next-rspack.

#Kmi

Kmi is a framework based on Umi and Rspack. By integrating Rspack as the bundler, Kmi delivers build performance improvements several times faster than the webpack version.

For developers currently using Umi, Kmi provides a progressive migration path that allows them to enjoy the performance benefits of Rspack while maintaining project stability.

For more information, see the Kmi repository.

#Upgrade guide

#Upgrade SWC plugins

If your project uses SWC Wasm plugins (such as @swc/plugin-emotion), you need to upgrade the plugins to a version compatible with swc_core@29, otherwise it may cause build errors due to version incompatibility.

For more details, see FAQ - SWC plugin version unmatched.

#Lazy compilation middleware

The lazy compilation middleware has changed its way of accessing the lazyCompilation option. Now, the middleware can automatically read the lazyCompilation option from the compiler instance, so you no longer need to manually pass in the lazyCompilation option.

import { experiments, rspack } from '@rspack/core';
import { RspackDevServer } from '@rspack/dev-server';

const compiler = rspack([
  // ...multiple configs
]);

// no longer need to pass options to the middleware
const middleware = experiments.lazyCompilationMiddleware(compiler);

const server = new RspackDevServer(
  {
    setupMiddlewares: other => [middleware, ...other],
  },
  compiler,
);