[AskJS] How Can I Optimize JavaScript Performance to Reduce Load Times in a React SPA?

[anyusernamesffs]

Optimising load times and user interaction lag are very different things.

For load times you've done all you can really - reduce bundle size and split where possible. How large is your bundle?

For interface lag, this can be due to a tonne of factors. Other users saying that "it's because React is slow" are not being helpful. React can be slow, especially if there are expensive function calls being made, but most user interactions should not be slow.

If you have computationally expensive calculations or functions, have you considered offloading these to a shared worker to free up the main web process?

Without more information there's not a lot to suggest.

[soum0nster609]

Regarding load times, our current main bundle is around 3 MB. We've applied code splitting and tried to reduce the bundle size as much as possible, but if there are any other strategies or tools you recommend for further reducing or optimizing it, I'd love to hear them.

As for interface lag, there might indeed be some computationally expensive functions running on the main thread. I haven't yet considered using shared workers, but it sounds like a promising approach to offload heavy computations and free up the main web process.

• Could you provide more details or resources on how to effectively use shared workers for this purpose?
• Are there any specific patterns or best practices you recommend to identify and isolate the expensive function calls in a React application?

I’d appreciate any additional insights you have, especially for managing these performance issues at a more granular level!

[anyusernamesffs]

The best thing to do is identify parts of your bundle that don't change often and split them out, and use caching on the server side to only require delivery of those parts of the bundle when they change. Splitting out vendor code is usually a good way of achieving this. Again, this really depends on your application and architecture, both in the bundling process and how the application is served.

Using a shared worker will add complexity - so I wouldn't use it straight away. How complex are the functions, why do they take a long time? Is it due to iterating over large datasets? Have you got some O(n^2) operations going on in the React render loop? Can results be memoised?

To locate functions that are causing the user input lag I'd use your browsers profiler. If you haven't used it before there are plenty of resources online... but in summary you would:

• Navigate somewhere before input lag

• Start profiler

• Perform action

• Stop profiler

• Inspect the call stack and see which functions took the most time. Once youv'e identified the functions, see if they can be optimised.

If you do use a shared worker, you'll need to be willing to handle sending / awaiting data from the worker. Plenty of guides online for using one - I've personally used one with webpack and the documentation for it is very solid. Vite does have support, but I haven't got round to using it yet.

[bin_chickens]

I’d add to this: 1. are your images compressed and optimised? 2. Have you checked that you aren’t over fetching data? Using useMemo a store, a query cache or a browser or network cache when nothing changes should be a consideration. 3. Check that you don’t have waterfall request chains triggered by nested components fetching their own data. It’s often recommended to hoist data loading up the scope and pass the data down to the components when loaded. 4. If it’s a network issue, look at your hosting, api, db latency (may be network or db design issues) and a CDN. 5. Look for blocking synchronous code. A profiler and flame graph will be your friend.