Lazy loading feature of Code Splitting technique in React
By Amar Balu, a multi-sport champion!
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 called
IntersectionObserver 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-createloadablecomponent
While the chunk is loading, the component
Loading is rendered in its place. Here’s a sample implementation of
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-js
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.
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 firstname.lastname@example.org!