Using Rspack

What is Rspack

Rspack is a high performance JavaScript bundler based on Rust, with interoperability with the webpack ecosystem, allowing it to be integrated into webpack projects at a low cost while providing better build performance.

Compared to webpack, Rspack has significantly improved build performance, thanks not only to the language advantages brought by Rust, but also to its parallel architecture and incremental compilation features. Benchmarking has shown that Rspack can provide 5-10 times better compilation performance.

Modern.js provides out-of-the-box Rspack support, so you can switch between the stable Webpack and the faster Rspack.

This document will show you how to enable Rspack build mode in Modern.js.

Initializing an Rspack project

The Modern.js generator provides an interactive question-and-answer interface to initialize a project. To create an Rspack project, simply select the Rspack build tool by running:

$ npx @modern-js/create@latest myapp
? Please select the type of project you want to create: Web App
? Please select the programming language: TS
? Please select the package manager: pnpm
? Please select the bundler: Rspack

After the project is created, you can experience the project by running pnpm run dev. For more project information, please refer to Quick Start.


When using Rspack as the bundler, the following Features are temporarily unavailable as some of the capabilities are still under development and we will provide support in the future.

  • Storybook Devtool
  • The usage of useLoader in Client Side Rendering

Enable Rspack build

You can enable Rspack build by running pnpm run new:

$ pnpm run new
? Please select the operation you want: Enable features
? Please select the feature name: Enable Rspack Build

After executing the command, enable the Rspack build in modern.config.ts:

import { appTools, defineConfig } from '@modern-js/app-tools';

+ export default defineConfig<'rspack'>({
  plugins: [
+     bundler: 'experimental-rspack',


Before using Rspack, please be aware that Rspack is still an early stage project and is currently in a rapid iteration phase. Therefore, you need to be aware of the following:

  • The API and configuration options of Rspack are still unstable, and the support for Rspack in Modern.js is experimental. Therefore, incompatible updates may be introduced in non-major releases in the future.
  • Rspack does not currently provide complete optimization capabilities like tree shaking, bundle splitting, and scope hoisting, which are available in webpack. We will continue to enhance these optimization capabilities in Rspack from June to December. Therefore, when migrating to Rspack, you may notice a certain level of increase in the bundle size compared to webpack.
  • Rspack currently relies on SWC for code compilation and compression. Due to the lower maturity of SWC compared to Babel and Terser, you may encounter SWC bugs.
  • Rspack is compatible with most plugins and loaders in the webpack ecosystem, but there are still some plugins and loaders that cannot be used temporarily.

Rspack is actively working to improve the above issues and plans to address them in future releases. We recommend that you evaluate your project requirements and risk tolerance before deciding whether to use Rspack. If your project requires high stability and performance, you should choose the more mature webpack. If you are willing to try new tools and contribute to their development, we welcome you to use Rspack and provide feedback and bug reports to help improve its stability and functionality.

Migrating configuration

After enabling Rspack building capability, further configuration migration is needed by referring to the Configuration Differences.

The relationship between Rspack and Modern.js versions

Usually, the latest version of Rspack will be integrated into Modern.js. You can update the Modern.js-related dependencies and built-in Rspack to the latest version by using npx modern upgrade in your project.

However, Modern.js uses a locked version dependency method (non-automatic upgrade) for Rspack. Due to differences in release cycles, the version of Rspack integrated into Modern.js may be behind the latest version of Rspack.

When Rspack is enabled for building through dev / build, the current version of Rspack used in the framework will be printed automatically:


Override the Built-in Rspack Version

You can override Rspack to a specific version using the capbilities provided by package managers such as pnpm, yarn, npm.

For example, if you are using pnpm, you can update the Rspack version with overrides as shown below:

  "pnpm": {
    "overrides": {
      "@rspack/core": "nightly",
      "@rspack/dev-client": "nightly",
      "@rspack/plugin-html": "nightly"
What is Rspack Nightly Version

The Rspack nightly build fully replicates the full release build for catching errors early.

Usually it is available and any errors that arise will fixed promptly.

However, if there are any break changes that require modern.js to modify the code, we recommend to wait for the next version of modern.js.

More examples of using package managers, please refer to: Lock nested dependency.