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 😎

--

--

--

Software Engineer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Boiler plate CRUD with Ruby on Rails

Handling Files more Easily

Evolution of Developer Experience Portal UI: Case Study

Migrating a large code base from .NET 4.8 to .NET (Core)

How to install Kali Linux on a VMWare Virtual Machine

Valerian migrate to Astar Network

Vim tip: persistent undo

Mechanical Eye Week 8

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jeong Woo Chang

Jeong Woo Chang

Software Engineer

More from Medium

Solve any external library error in TypeScript with module augmentation

Breaking Remix JS: A ‘How Not To’ Guide

Improve JavaScript Performance with Tree Shaking

Build Your React Component Library with TypeScript and Rollup