CRA to Rspack Migration: 5-10x Faster React Builds
Tags: cra, rspack, react, javascript
Published: 2024-05-26 13:43:51


## What is [CRA](https://create-react-app.dev/)?
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](https://www.rspack.dev/) 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](https://rsbuild.dev/) which is an [Rspack](https://www.rspack.dev/)-based build tool for the web. The main goal of [Rsbuild](https://rsbuild.dev/) is to provide out-of-the-box build capabilities for [Rspack](https://www.rspack.dev/) users, allowing developers to start a web project with zero configuration.

We have set up a [demo react application generated by CRA](https://github.com/saurabhkhoshya/migrate-create-react-app-to-rspack), let migrate it in to [rspack](https://www.rspack.dev/)
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u3hhr6pbjjmol0klapaz.png)

> **Step 1**: 
Remove CRA dependencies

```
npm remove react-scripts
```

> **Step 2**: install [Rsbuild](https://rsbuild.dev/[](url)) 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](https://rsbuild.dev/) CLI commands
```
{
  "scripts": {
    "start": "rsbuild dev",
    "build": "rsbuild build",
    "preview": "rsbuild preview"
  }
}
```

> **Step 4**: Creating Configuration File

> Create a [Rsbuild](https://rsbuild.dev/) 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()],
});
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ml0f8ekt1gkhg33ielle.png)

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q21hlaichoc4wkuxq83w.png)

Here is the [link for a git repo for the CRA to Rspack Migration](https://github.com/saurabhkhoshya/migrate-create-react-app-to-rspack). 

For more detailed and advanced config check [Rsbuild](https://rsbuild.dev/guide/migration/cra)