As your app is growing, the development environment and compilation are getting slower and slower, it can easily reach 10+ mins for the build time 🐢. To improve build time and ship code faster to production you might be interested in using these tools and get:
- Faster loading time in development
- Faster build time
- Faster tests
While these tools are focused on the create-react-app tooling, you can take a look at the source code and integrate them into your own webpack configuration.
How is it working?
babel-loader is replaced by
swc-loader and the code that needs to be processed is sent to the native (go or rust) binary instead of babel.
I added both approaches to one of my typescript application to see what are the results.
For a pretty small project, we can see that the build time is faster. For esbuild we can see that our build is more than 2x faster. esbuild is currently faster than swc as it also includes a minifier, so we can replace the default terser minifier with it.
If you are trying this on a bigger project I would love to know the results you get!
In order to have the same results, these tools are not using webpack but rather their own implementation. In the future, I think we will see projects like create-react-app either drops webpack for another faster solution or see them moving the webpack loaders to these new tools written in go / rust.
But as these tools are quite new it will take some time to see them widely used. As of now replacing the webpack loaders seems like the best approach to get a nice performance improvement while still being able to use all the plugins that the webpack ecosystem provides.