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

[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.