CRA to Rspack Migration: 5-10x Faster React Builds

Saurabh — Sun, 26 May 2024 13:43:51 +0000

What is CRA?

CRA is a fantastic tool for getting started with React development. Easy to use and well documented and provides a solid foundation for the project. Under the hood it uses webpack, Babel, ESLint, additional Tools and libraries. Developers can more focused on implementing business logic rather than configuring all these setups by own.

Need for Rust based bundlers:

The performance of bundling and HRM is directly proportional to the codebase size, for large code-base apps bundling by webpack takes a lot of time.
As your application grows in complexity you might start to notice performance bottlenecks in the build process.
Rspack is a next-generation bundler designed for lightning-fast 5 to 10x faster builds. It built on the high-performance Rust programming language

Migration Steps:

Create React App (CRA) itself has many built-in capabilities so manually setting up an equivalent configuration using @rspack/cli can be challenging.
For migration, we will use rsbuild which is an Rspack-based build tool for the web. The main goal of Rsbuild is to provide out-of-the-box build capabilities for Rspack users, allowing developers to start a web project with zero configuration.

We have set up a demo react application generated by CRA, let migrate it in to rspack

Step 1:
Remove CRA dependencies

npm remove react-scripts

Step 2: install Rsbuild dependencies

npm add @rsbuild/core @rsbuild/plugin-react -D

Step 3: Updating npm scripts in package.json

{
  "scripts": {
   "start": "react-scripts start",
   "build": "react-scripts build",
   "eject": "react-scripts eject"
  }
}

Replace with Rsbuild's CLI commands

{
  "scripts": {
    "start": "rsbuild dev",
    "build": "rsbuild build",
    "preview": "rsbuild preview"
  }
}

Step 4: Creating Configuration File

Create a Rsbuild configuration file rsbuild.config.ts in the same directory as package.json and add the following content:

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

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

Step 5: Basic migration has done, you can start an application by running npm run start and for build run npm run build

Below is the build performance, build time drops from around 11 seconds to 2 sec.

Here is the link for a git repo for the CRA to Rspack Migration.

For more detailed and advanced config check Rsbuild

Forem: Saurabh

CRA to Rspack Migration: 5-10x Faster React Builds

What is CRA?

Need for Rust based bundlers:

Migration Steps: