In this tutorial, you will learn how you can use react-loadable to enable lazy-loading within your react application. There are several different strategies that can be used with lazy-loading, however, in this tutorial I will focus on lazy-loading based on URL/routes.
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 framework like Gatsby.js then you will want to look into client-side lazy-loading.
What Is 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's take this website. If it was built using react then 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's worse some of this lag may be completely unneeded if the visitor never visits another page on your site. As the visitor's browser will have downloaded a bunch of code that it didn't need to.
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 quicker
- Server traffic should get reduced meaning I can server more traffic
To re-cap, with code splitting we can configure an application to only serve the minimum amount of code required to render a page and that the cruft is only downloaded if and when it is needed.
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 your components in that will give you lazy-loading via dynamic imports for minimal development effort. This means you can use code-splitting within your code-based by installing a package and then 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 to me
To start using react-loadable:
Within the file where you configure your 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 returned from the user will be slightly smaller than before. When the user navigates off of the homepage onto the landing page an extra network request being made from the application to get the landing-page chunk from the server.
At first glance, this might seem like a minimal benefit and on very small applications this type of approach might be overkill. If you work on a large application with a lot of pages, that get used by hundreds of thousands of people a day then reducing the bundle site can have a massive impact in terms of reducing page-load times and being able to server more traffic from your existing infrastructure. Enjoy!