banner image 1 banner image 2

Lazy loading feature of Code Splitting technique in React

March 14, 2022
5 mins
blog-img 1
Amar Balu

Bringing Lazy Loading through Code Splitting

By Amar Balu, a multi-sport champion!

A common problem faced by most single-page applications (SPAs) are large bundle sizes and slow loading once they starts. As they try to download all its Javascript, css files required for the application to start before rendering a single pixel.

Lazy Loading through Code Splitting
Source : Google

A simple way to solve this problem is to use code-splitting i.e. breaking down the application’s JavaScript into small modular bundles called chunks, which can be loaded on-demand when its particular feature gets accessed. The goal of the article to share a lazy loading feature of component-based code splitting technique.

Component-based code splitting

The open source library react-loadable provides an API for code splitting that lets you to add breakpoints in your bundle with a few lines of code. This library imports a component dynamically if it exists in the page.

Webpack automatically takes care of splitting the bundle and loading chunks on demand under the hood.

Component-based code splitting

React-loadable-visibility adds a layer that enables you to load content once that is visible on the screen.

Why do we need lazy loading ?

React-loadable are higher level components to load additional modules once they are mounted on your page. It's helps in keeping your bundle size small and pulling in a larger payload when the required components are part of your tree.

However it will not account for the content that’s currently visible on your page, and only load what’s actually visible to the end user. If you have a long page and are loading the entire content of that page for the user, even though they may only be able to see the content above the fold, it can be wasteful and especially detrimental in a mobile context.

react-loadable-visibility is positioned to solve these issues by leveraging the existing awesome API of loadable libraries with an extension to only trigger the loading of additional content once that component comes into view.

React Loadable Visibility

React loadable visibility builds a wrapper around the react loadable components that loads imports once the contents interacts the viewport.

A good example of this is lazy loading images that aren’t directly visible in the viewport unless the portion gets visible on scrolling down.

We can do the same with components!!! Woohooo!!!

As we are not loading all the components initially by adding dynamic imports on run time. It helps to reduce our bundle size.

In order to know whether components are exists in our viewport, the library use a Web API calledIntersectionObserver to quickly add import on visibility to our application.

Under the hood

React Loadable

React loadable provides a generic way to loading components with dynamic imports with arguments of loader, modules and loading.

loader and modules takes the component to import dynamically in the screen.
loading provides a fallback content to display until component gets loaded.

Loadable creates a custom component that delivers the fall-back content until the component gets downloaded and begins to render in the screen.

While the chunk is loading, the component Loading is rendered in its place. Here’s a sample implementation of Loading:

The prop error is set to a non-null value if the chunk fails to load.

React Loadable Visibility

This library builds a wrapper around the react-loadable component, uses IntersectionObserver web API pattern to determine the component intersection in the viewport.

The Intersection Observer API lets code register a callback function that is executed whenever an element they wish to monitor enters or exits another element (or the viewport).

How The Intersection is Calculated ?

Before finding the intersection, we would be attaching references to the components, that helps to calculate the position of the element in the viewport.

If the target (component) currently intersects the viewport by looking at the entry’s isIntersecting property, if its value is true or the intersection ratio is greater than 0 .the target is at least partially intersecting the viewport or document. That helps to trigger the component to be download and begins to render once it gets downloaded.

I’ve skipped over many details to keep this article short and focus on the idea of bringing lazy loading through code splitting. Following reference are some good places to learn more about the topic.



Meet the team!

Balu Amarnath

Muthukumar K

Mridula Saravanan

We at CaratLane are solving some of the most intriguing challenges to make our mark in the relatively uncharted omnichannel jewellery industry. If you are interested in tackling such obstacles, feel free to drop your updated resume/CV to!
blog-img 2


blog-img 3
5 mins
May 17, 2023
Sharing Data Between Controllers: Best Practices S...

This article will help you to understand the diffe

By Naveen C

blog-img 3
5 mins
March 21, 2023
Understanding Auto Layout and Constraints in Swift...

This article gives you an easy way of understandin

By Ramasamy P