Webpack has long been the dominant player in the JavaScript web bundler landscape. Over time, many competitors have gradually entered the arena, each offering unique features and improved performance. Among these newcomers, Rspack stands out with its innovative approach to web application bundling. Leveraging a Rust core, it provides high-speed, multithreaded code splitting.

In this article, we will explore what Rspack brings to the JavaScript ecosystem, its key offerings, and how to use it to create a React project.

Let’s dive in!

What Is Rspack?

Rspack is a high-performance JavaScript bundler written in Rust. It takes multiple JavaScript files and their dependencies, combines them into a single or a few output files, and optimizes them for better performance. This process is generally performed in frontend JavaScript web applications, generating optimized bundles that are delivered to the browser.

Rspack offers strong compatibility with the webpack ecosystem, acting as a drop-in replacement. As a result, migrating to Rspack is easy and intuitive, as the team behind the bundler aim to cover most of webpack’s APIs and features.

Rust's unique strengths make it ideal for scenarios where performance and resource efficiency are critical, such as JavaScript builds. That results in lightning-fast builds, hot module replacement (HMR), and production bundling.

Even though the first commit was only made in June 2022, the project has already garnered significant attention in the developer community. As of writing, Rspack has over 11.2k stars on GitHub and more than 1 million weekly downloads on npm.

Rspack: Main Features

Now that you understand what Rspack is, let's explore what it brings to the table.

Framework Agnostic

Rspack isn’t bound to any specific frontend or backend framework. That means it’s compatible with a variety of technologies, including React, Preact, Vue.js, Solid.js, Svelte, and NestJS.

Additionally, it allows you to import JavaScript, TypeScript, CSS, HTML, and JSON files natively and directly.

For example, suppose you have the following sample.json file in the json folder of your project:

{
  "users": [
    {
      "id": 1,
      "name": "Alice Johnson",
      "email": "alice.johnson@example.com",
      "age": 28
    },
    {
      "id": 2,
      "name": "Bob Smith",
      "email": "bob.smith@example.com",
      "age": 34
    },
    {
      "id": 3,
      "name": "David Brown",
      "email": "david.brown@example.com",
      "age": 72
    }
  ]
}

Rspack gives you the ability to import this into a JavaScript file as below:

import users from "./json/users.json";
console.log(users[0].email); // "alice.johnson@example.com"

Fast Building and Bundling Capabilities

Rspack achieves high speed thanks to its foundation in Rust, a language renowned for top-notch performance and memory management. Rust's compiler also includes safeguards to avoid common pitfalls and ensure greater stability.

Rust’s concurrency model opens the door to parallel processing for code-splitting, which significantly accelerates build times. Additionally, Rspack comes with built-in plugins that reduce the need for extra configuration and further enhance the speed of the bundling process.

Quick Development Server Mode

Developers tend to invoke npm run dev multiple times per hour. To start a local development server in complex projects, that command can take several seconds — or even minutes, especially for very large applications.

Those delays hinder engineering productivity and slow down the development process. That’s why ensuring a smooth experience in development mode can be even more important than achieving quick build times in production bundling.

To minimize delays during development, Rspack incorporates a specialized incremental compilation strategy that provides an optimized Hot Module Replacement (HMR) experience.

Flexible Configuration

Rspack supports configurations similar to webpack, allowing for customizable configurations that adapt to various project requirements without imposing rigid constraints.

The Rspack CLI automatically reads the rspack.config.js configuration file in your current working directory, behaving accordingly. The extensions supported for this file are .js, .ts, .cjs, and .mjs.

For example, below is a basic Rspack configuration file:

// rspack.config.js
 
module.exports = {
  entry: {
    main: "./src/index.js",
  },
};

Note that you can also merge multiple configuration files using the webpack-merge plugin.

Optimization Features

Here’s the list of the most relevant native optimization offered by Rspack:

• Bundle analysis: Support for bundle analysis via the --analyze option. Behind the scenes, the CLI relies on webpack-bundle-analyzer.
• Tree shaking: Remove unused code from the final production output by default to make bundles lighter and more efficient.
• Source maps: Facilitate debugging in production environments through source maps.
• Minification: Minify JavaScript and CSS code by default during production builds.
• Code splitting: Reduce code into separate parts to improve load time performance. Note that you have full control over the size and number of resources generated.
• Rsdoctor: A build analyzer that visually displays the build process, including compilation time for each loader and plugin, code changes before and after compilation, module reference relationships, and duplicate modules.

Plugin Support

Similar to webpack, Rspack's functionality can be enhanced through plugins. These plugins manage the overall build process and can leverage Rust's unique features. Keep in mind that the web bundler natively supports numerous Node.js plugins too, so users don’t have to worry about compatibility issues.

Rspack includes various Webpack-aligned built-in plugins and supports additional community plugins.

Explore the available plugins for Rspack.

How to Set Up a React Project with Rspack

In this step-by-step section, you’ll see how to set up a React project using the Rspack project generation tool.

Get Started with Rsbuild

Before getting started, make sure you have Node.js 16+ installed on your machine. The current LTS version of Node is recommended.

The suggested approach to initialize a new Rspack project is to use Rsbuild, a high-performance build tool that comes with a set of thoughtfully designed default build configurations. This provides an out-of-the-box development experience, enabling you to fully harness the performance advantages of Rspack.

Run the following command to create a new project using Rsbuild:

npm create rsbuild@latest

If this is the first time you’re using the tool, you’ll be asked to install it:

Need to install the following packages:
create-rsbuild@1.0.2
Ok to proceed? (y)

Type y and press Enter to proceed.

Rsbuild will ask you to:

1. Insert the project name.
2. Select the framework you intend to use from the list of supported frameworks (JavaScript vanilla, React, Vue 3, Vue 2, Lit, Preact, Svelte, or Solid).
3. Select the programming language (TypeScript or JavaScript).
4. Select additional tools (Biome, ESLint, and Prettier integration).

Now, assume you want to:

1. Initialize a Rspack project in the react-demo folder
2. Based on React
3. In TypeScript
4. Using ESLint and Prettier

The output of create-rsbuild is:

◆  Create Rsbuild Project
│
◇  Project name or path
│  react-demo
│
◇  Select framework
│  React
│
◇  Select language
│  TypeScript
│
◇  Select additional tools (Use <space> to select, <enter> to continue)
│  Add ESLint for code linting, Add Prettier for code formatting
│
◇  Next steps ────╮
│                 │
│  cd react-demo  │
│  npm i          │
│  npm run dev    │
│                 │
├─────────────────╯
│
└  Done.

The react-demo folder will have the following project structure:

react-demo
  ├── public
  │     └── .gitkeep
  │
  └── src
  │     ├── App.css
  │     ├── App.tsx
  │     ├── env.d.ts
  │     └── index.tsx
  │
  ├── .gitignore
  ├── .prettierignore
  ├── .prettierrc
  ├── eslint.config.mjs
  ├── package.json
  ├── README.md
  └── rsbuild.config.ts
  └── tsconfig.json

Develop the Application

Enter the project folder and install the project dependencies:

cd react-demo
npm install

This will take a while, so be patient.

Now, load the project in your favorite JavaScript IDE and develop your React web application.

Run the React Application

To run the application in development mode, execute:

npm run dev

As you can verify in package.json, the dev command corresponds to:

rsbuild dev --open

This will launch your React application on http://localhost:3000/. Visit it in your browser, and you’ll see:

Open the src/App.tsx file, change its content, and save. Rspack will update the development application in real time using HMR.

To build your application for production, run:

npm run build

This corresponds to:

rsbuild build

The command will generate the following output:

> react-demo@1.0.0 build
> rsbuild build
 
  Rsbuild v1.0.12
 
● web ━━━━━━━━━━━━━━━━━━━━━━━━━ (100%) emitting after emit                                                              ready   Built in 0.47 s (web)
 
  File (web)                              Size        Gzip
  dist\static\css\index.5f2e0ec8.css      0.34 kB     0.25 kB
  dist\index.html                         0.37 kB     0.25 kB
  dist\static\js\index.e52b2659.js        1.5 kB      0.83 kB
  dist\static\js\lib-react.b2e35614.js    140.2 kB    45.0 kB
 
  Total: 142.4 kB (gzip: 46.3 kB)

In particular, it’ll create a dist folder in your project’s root directory with the application bundle:

dist
  ├── static
  │   ├── css
  │   │     └── index.5f2e0ec8.css
  │   │
  │   └── js
  │         ├── index.e52b2659.js
  │         ├── lib-react.b2e35614.js
  │         └── lib-react.b2e35614.js.LICENSE.txt
  │
  └── .gitkeep
  └── index.html

Et voilà! You now know how to use Rspack to build a React project.

Migrating to Rspack

Rspack was developed to make it easier to migrate projects from existing popular bundlers. For more details, refer to the official guides:

• Webpack migration guide
• Create React App migration guide
• Storybook webpack migration guide

Rspack Vs. Webpack, Esbuild, Turbopack, and Vite

We compare Rspack against webpack, esbuild, Turbopack, and Vite in the summary table below:

In general, Rspack is especially well-suited for large-scale projects. In these scenarios, the demand for faster build times and an efficient development server loader can significantly improve the overall development experience.

Wrapping Up

In this blog post, we explored why Rspack is the perfect tool to power large JavaScript frontend projects in development and production.

You now know:

• What Rspack is and why it's written in Rust
• The features and characteristics it offers for bundling and building
• How to use it to create a React project
• How it compares against other popular web bundlers

Thanks for reading!