DEV Community

Cover image for CRA to Rspack Migration: 5-10x Faster React Builds
Saurabh
Saurabh

Posted on

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

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

Image description

Step 1:
Remove CRA dependencies

npm remove react-scripts
Enter fullscreen mode Exit fullscreen mode

Step 2: install Rsbuild dependencies

npm add @rsbuild/core @rsbuild/plugin-react -D
Enter fullscreen mode Exit fullscreen mode

Step 3: Updating npm scripts in package.json

{
  "scripts": {
   "start": "react-scripts start",
   "build": "react-scripts build",
   "eject": "react-scripts eject"
  }
}
Enter fullscreen mode Exit fullscreen mode

Replace with Rsbuild's CLI commands

{
  "scripts": {
    "start": "rsbuild dev",
    "build": "rsbuild build",
    "preview": "rsbuild preview"
  }
}
Enter fullscreen mode Exit fullscreen mode

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()],
});
Enter fullscreen mode Exit fullscreen mode

Image description

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.

Image description

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

For more detailed and advanced config check Rsbuild

Top comments (0)