In this tutorial, you will learn how you can use react-loadable to enable lazy-loading within your react application. When you start to consider lazy-loading we are really thinking performance. How can we optimise the page to load as quickly as possible.? There are many different strategies that can be used to make a page load quicker. This tutorial is not a comprehensive list of everything you could do, instead, I will focus on explaining the benefits of code-splitting and lazy-loading. Code-splitting will split our JS bundle to be optimised. Lazy-loading will allow the app to get the additional data it needs when a web user scrolls below the fold.
When lazy-loading on URL the initial payload is massively reduced. Instead of your whole react code-based getting bundled up and sent to the client on initial load, only the code and the data to render the current part of the page the user can see is sent. When a user then navigates to a different page, the browser can then request the next chunk of Javascript from the server. For this article, I will assume that you are using server-side rendering with react-router to display your pages. If you are using a static site generator framework like Gatsby, or NextJS, this approach might not exactly translate, so be warned!
Lazy-loading Vs Code Splitting
Lazy-loading is a term most developers have heard of. When a component or page is lazy, it is loaded on demand. This is done via code splitting. Code splitting is a technique where an application is bundled up into chunks. On an initial request only the chunks that are needed are loaded, and nothing more.
For example, let us take this website. If it was built using ReactJS, the first time that you visited the homepage, the server would send you back the whole applications bundle. Sending the whole bundle on the first load will add some lag to the first-page render. What is worse, some of this lag may be completely unneeded. If the visitor never views another page on your site, they will have downloaded code that they will never use.
Code splitting allows us to configure an application to only serve the minimum amount of code required to render the viewable part of a page. The rest is the pages code and data is downloaded only when it is needed. In code-splitting, I could bundle my code by URL. When you visited this site, the server would only send you the chunk of the code to render the homepage. This has two benefits:
The page loads are quicker for users
Server traffic should get reduced meaning they can serve more traffic
React-loadable
There are a few different frameworks that support server-side rendering (SSR) code-splitting, the one that will be used within this tutorial is react-loadable. You can find more about react-loadable from here.
react-loadable is a higher-order component that you can wrap around your components. Afterwards, it will give you lazy-loading support via dynamic imports. react-loadable is very easy to use. For minimal development effort, you can get some great performance advantages. You can get all the benefits of code-splitting and lazy-loading by installing a package and wrapping a few components, simple! If this sounds like something that will benefit your application, then read on:
How To Configure react-loadable
To install react-loadable, we use this command:
Next, you will want to configure babel. On the project, I'm, currently working on we use babel.config.js. There are several other ways to configure babel, you can find out about that here. I added this config in my application:
To start using react-loadable, you can architecture your code like this:
Within the file where you configure react-router you can then use your react-loadable routes, like so:
With loadable now installed and configure within your react-router you now have SSR code-splitting set-up and configured. If you run the code above, the initial payload of your application will be slightly smaller than it was before. When the user navigates to another page, an extra network request will be made from within your app to get the chunk of code from the server to render the additional page.
On very small applications this type of approach might be overkill. If you work on a large application that gets used by hundreds of thousands of people a day, this reduction of bundle size can have a massive performance impact on your website. Reducing page-load times and being able to server more traffic from your existing infrastructure. Happy coding!
