Lazy loading of React Components

Web Applications designed in JavaScript, HTML, CSS are growing strong, and with that, their sizes too. When we are dealing with really big web applications, with highly complicated dashboards, and a ton of features, the developers often struggle with the final application bundle size. The bundle.js being one file and it's huge size doesn’t only affects the loading time, but also hampers the initial page performance too.

Many of the developers who uses the Webpack, already make use of the Commons Chunk Plugin to break the bundle in two parts, the application itself and the vendor/third party code. This idea is great, as the vendor bundle don’t change that often and we can use the power of the browser cache to serve this files almost instantly.

If we think in the same way, not everything changes in each deployment.Then, why make user/browsers download the entire big size bundled Javascript file for any minor changes/additions. Also, why increase the size of bundled file in every release/deployment.

Here comes the need for code splitting, and lazy loading of React Components such that components get loaded only when Browser/User needs it. Think of an application having a login page, and upon successful logging, user lands onto a dashboard page.However, the user/browser already has the login as well as dashboard page loaded in the browser, even before we know if the user will at all land onto the dashboard.

Why not load dashboard page(or the components) once we know that the user is legitimate , or load pages/components on demand.

Being Lazy is the new 'Being Fast'

Enough being said, let's see it running :-

I will be using create-react-app boiler plate to build a simple react application demonstrating the lazy load component idea.

1). Open your terminal and run `npm install -g create-react-app` to install it globally.

npm install -g create-react-app

2). run `create-react-app code-split-example` which will create folder named 'code-split-example' in your present working directory.

create-react-app code-split-example

3).run `npm start` and go to localhost:3000 , you shall see the `Welcome React` page.

All set, let's open up the project in your fav editor( VS Code for mine) and add our component.

4). Create a file called `NewComponent.js` which will just render a simple div element containing `My New Component`.

5). Import the `New Component` in App.js and comment out the <p> tag element and render our newly created component.

6). Go to the browser -> localhost:3000 and you shall see the newly added component being rendered.

Let's open up the developer tool (Press f12) and select the network tab. You will see a bundle.js file of type `script` (which the finally generated bundled JavaScript code).

7). Also run `npm run build` and you will see on terminal two file's with extension *.js and *.css created. The *.js being the bundled file. This shows that the whole of our application is bundled into a single js file which the user/browser has to download.

8). Let's see the lazy way of loading components into our application. Comment out the import part of New Component from app.js and write a async function loadComponent which will load our component on demand using import('./NewComponent') feature which is an async call .

 let's modify the render screen to have a button to load New Component.

9).All set, let's see the browser.  If you see the network tab now, you will still see the `bundle.js` file, however this file doesn't contain our new component.

When you click on the button to load `New Component`, you will see a new entry in Network tab with type `script` and extension `*.chunk.js` , which is being loaded on 'demand' (button click).

10). Finally, if you run `npm run build` again, you will find two *.js file one referring to the bundle.js and other which will be loaded on demand.

The lazy loading is intended for big applications, where breaking in chunks can really make a huge difference in the performance and the responsiveness of the applications. This was a very basic implementation of the above, more intended for complete understanding.

Happy Coding !!