RiverTwilight
Posted on March 7, 2021
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.
Posted on March 7, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.