Lazy loading feature of Code Splitting technique in React
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.
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.
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.
React-loadable-visibility adds a layer that enables you to load content once that is visible on the screen.
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 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.
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.https://gist.github.com/amarbalu/0bce63e8496759e8214c025ad7f3614d#file-loadable-js
Loadable creates a custom component that delivers the fall-back content until the component gets downloaded and begins to render in the screen.
https://gist.github.com/amarbalu/b5132cca881a463a06237e9e9d7fc371#file-createloadablecomponentWhile 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.
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).
Before finding the intersection, we would be attaching references to the components, that helps to calculate the position of the element in the viewport.
https://gist.github.com/amarbalu/7941d8589f1ea693b027488fdc46662d#file-createloadablevisibilitycomponent-jsIf 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.
import: https://developers.google.com/web/updates/2017/11/dynamic-importAuthor
Balu Amarnath
Reviewer
Muthukumar K
Editor
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 careers@caratlane.com!
Leave a Reply