Use esbuild to speed up your Creat-React-App project

Slow compilation speed has always been a pain point of CRA(create-react-app). Generally CRA uses webpack 4 as bundler but the esbuild even faster than it.

I compared the startup time of the two bundlers with one my bloated project: esbuild saved 25s than webpack(from 71s to 45s).

Currently(4.0.1) cra doesn't support esbuild offically so we need to mannually migrate to esbuild. There are two ways: use create-react-app-esbuild or manually modify the webpack configuration of CRA.

Use create-react-app-esbuild

I recommend this way because it's easier and stabler.
Just see this short doc.

PS: If you use vercel or other auto-deploy production it's better not to change the build: react-script build command for stabler deployment.

Modify the webpack configuration of CRA.

In fact, the create-react-app-esbuild is only an encapsulation of esbuild-loader.

See my answer at stackoverflow for how to update webpack config without running react-scripts eject. It's not recommended since after upgrating react-scripts to 4.x there are many compilation problems in my project and I solved them by using default config.

It is worth noting that esbuild do not support new JSX transformer currently so import React from 'react' is still required.