React Lazy — Optimizing Bundle Size | by Rishi Jodha – Beragampengetahuan

React Lazy and Suspense is a powerful tool to help you achieve the optimization we require. It works by dynamically getting components when they are required by your App rather than adding them to the main bundle that will be pulled by the browser at the very beginning.

Documentation link: https://reactjs.org/docs/code-splitting.html#reactlazy.

The decision of what should be loaded dynamically and what should stay as a part of the core bundle is quite specific to every individual app. Also, breaking down an app to a very fine granularity to load dynamically is most likely not the best solution in this case as every lazy load implies a call from the browser to fetch the required content.

Keeping that in mind, dividing code chunks with respect to routes of the application can be a useful solution. Let’s try it out.

Dynamically Loading Content on the Basis of Routes

Let’s take an example of a fairly common app design having the following pages:

Home | About Us | Services

It would be safe to assume that separate containers are responsible for handling these routes. So why would we require content that is specific to the ‘Services’ page to be added to the bundle when the user lands on the ‘Home’ page? Hence, lazy loading routes can result in a very efficient solution to code splitting.

Let’s implement React Lazy and Suspense for our app.

LazyLoader.js

App.js

This will eventually result in separate chunks being created for each route rather than having a single heavy bundled file taking you a step further in improving the app’s performance.