react-code-splitting-techniques

[utterances-bot]

Maximising performance with React code splitting techniques | Edvins Antonovs

You can maximise the performance of your React applications with my guide to the latest code-splitting techniques. Learn how to use dynamic imports, React Lazy, Loadable Components, route-based code splitting, preloading, inlining critical CSS, and dynamic chunks with code examples.

https://edvins.io/react-code-splitting-techniques

[Cheuktingchan]

Interesting topic! How would you know if your site performance is being affected by the JavaScript bundle size?

[ummahusla]

@Cheuktingchan, there are some signs that your site performance is being affected by the JavaScript bundle size. I will split them into two groups:

Slow page load (if your site is taking a long time to load, it could be due to the size of your JavaScript bundle).
High server costs (if your site is receiving a large amount of traffic and your server is struggling to keep up, it could be because the JavaScript bundle is putting too much strain on the server).

High bounce rate, poor user experience, low conversion rates (if users leave site quickly it can be because website takes long to load or slow to transition between pages, this all can lead to less likely for auser to purchase or sign up for a service).

Google Lighthouse is your friend, you can use it to identify performance issues and try to optimise your JavaScript bundle size.

If you use webpack, try webpack-bundle-analyzer it will create an interactive treemap visualisation of the contents for all your bundles.

[Julia-Fremder]

Great post! Much clarifying, thank you.