Make Create-React-App Faster with Rust
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
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.
yarn add -D @craco/craco craco-swc
You can change the swc loader options. See the doc.
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
After applying the fix found in the issue, the config file would look like this.
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 .
"start": "react-scripts start",
"test": "react-scripts test"
Change the default
"start": "craco start",
"test": "craco test"
At least, I’m pretty sure that your project now runs faster 🚀
Enjoy the speed 😎