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.
Top comments (0)