We have a very large application and it takes around 3-4 seconds to load the 3.5 mb javascript bundle. The bundle consists of all the javascript and react code in the application.
We want to reduce the load time to around 1-2 seconds. We tried serving the js through CDN and that takes around 1 second but then all the test stages we have will be served through CDN and not the code changes which the developers make.
We checked but have not tried code splitting using lazy-suspense, bundle splitting and route based slitting. Any suggestions here?
Just wanted to know how we can reduce the performance to this extent. Any help is appreciated.
There's a lot you can do here.
I've had success with route-based code splitting using React.lazy. If your app has a login, lazy-loading the post-login routes might be a good place to start.
Have a good look at your dependencies. There's a strong likelihood that some are very large. For example, if you work with Moment.js, Day.js is much smaller and largely API compatible. (Moment Project Status has some other recommendations).
Check whether you still need all of your dependencies. e.g. dropping support for Internet Explorer and older versions of Safari/Chrome/Firefox might mean you don't need so many polyfills etc.
If things are getting really bad, look into a framework which renders on the server, then (optionally) becomes an SPA (e.g. Remix or Next).
Try to use the useMemo hook for some of your code.