Make Create-React-App Faster with Rust

Photo by Puk Patrick on Unsplash

Create-React-App is maintained by the React’s creator, Facebook and it is one of the most popular boilerplate for React projects. As project grows, the compilation becomes slower and you will want to make a build faster. There are countless ways to improve this after ejecting from CRA, but today, I would like to introduce a way to make it faster without ejecting.

Update to latest CRA version

Using latest release of react-scripts may help you boost the build speed.
How to update CRA to latest version.

Build with Rust

swc is the blazing fast JavaScript/TypeScript transpiler written in Rust.

From the swc official page,

It’s 20x faster than babel on single thread, and 70x faster on 4 core benchmark.

In reality, the build time improvement may vary depends on the file structures, configuration and size of the projects.

Beware that not all babel features are available with swc.

Install Dependencies

yarn add -D @craco/craco craco-swc

Create Craco.config.js

For JavaScript

For TypeScript

You can change the swc loader options. See the doc.

Some Tweaks

Since CRA 4, the eslint-loader is removed and you will see this error message.

craco:  *** Cannot find ESLint loader (eslint-loader). ***

In order to fix this, you have to do extra tweak in craco.config.js

After applying the fix found in the issue, the config file would look like this.

Craco Config for TypeScript with Fix

Update Package.json

CRA sets scripts on the project root’s package.json.
As you know already, you can run the app with yarn start and run the tests with yarn test .

"scripts": {
  "start": "react-scripts start",
  "test": "react-scripts test"
}

Change the default react-scripts to craco .

"scripts": {
  "start": "craco start",
  "test": "craco test"
}

At least, I’m pretty sure that your project now runs faster 🚀

Enjoy the speed 😎