Code Splitting in React using React Loadable | Load code On demand

We are going to talk about how you can make the initial page of your site load faster. If you are using a React Application, then over 30kb of the page size is already consumed by React. So if your initial page load is more than 50kb ( even after gzip compression ), this can cause performance issues and bad user experience.

When we use module bundlers like Webpack, it creates a large bundle. If you have a big application you don’t need the 100% of the code to be loaded up front, for your site to work. This is where Code Splitting helps. So Code splitting would mean that you don’t need all the code to run your application on the initial page load. So we can break the bundle into different chunks and load them dynamically as in when we need them( on demand )

React Loadable

We can implement code-splitting using React Loadable. React Loadable is a higher order component which makes it easy to split up the bundles. It is used for loading components with dynamic imports. To understand how React Loadable can help us perform Code Splitting and reduce the initial page load size, let’s see it in action.

Github repo: https://github.com/imranhsayed/react-app-webpack/tree/code-splitting-with-loadable

Let's install react-loadable

npm i react-loadable

Now let's create a component called About.js

Now let’s add this code in src/App.js. Notice that we are importing the react-loadable here.

Now let’s understand what we have done here.

If we import About.js from ./components/About at the top of the file, it will load that component synchronously at the time of page render and make our initial page load size larger. What we really want is that this component should be loaded asynchronously. We want to load it only when the user actually clicks on the About link. With the help of import() webpack can split up your code, when you add a new one.

So what we have done here is that instead of importing it at the top we are importing it dynamically using Loadable().

What Loadable() does is that it load our About component when someone hits that route /about( when the component is mounted in the DOM ) . It gives us an ability to display any message ( e.g. loading message ) until the Component is being loaded by returning that information inside loading(). And loader takes a function where we define which component we want to import.

The difference between import at the top and the one inside the Loadable() down below is that the import statement at the top isn’t a function invocation, its a module declaration. It's static and you cannot use a variable on top. So you can statically analyze your bundles.

However, the import() is a function. So its dynamic and will split out About component into a separate component.

Now let's run our server and see how it works

npm run dev

So if you check above demonstration gif, you will observe that the About.js does not get loaded on the initial page load. This is why when we search the text ‘This is About’ in the bundled file on the initial page load, it says No match found However, when we click on the About link, that’s when About.js component is imported by Loadable(). And now when we search the text ‘This is About’, we can see it.

You can do code splitting for lodash and moment libraries too, as they are very large libraries to be loaded on your initial page load.

Using Service Workers

You can make this even faster, using service workers. Service workers are the features you can install on your application and use service workers in your app in the background. And after the initial page load, you can let service workers download the rest of the imports and keep it cache memory. So that when those routes are hit, later on, the imports can happen fast as they are already there in the cache memory.

Prefetch

You can also prefetch your bundles using rel=“prefetch”. This works only if the user’s system has sufficient battery and good signal. If the user has low battery and bad signal, it going to ignore prefetching which is exactly something you would want. You wouldn't want to burn people’s battery when it's already low.

// public/index.html
<script rel="prefetch" src="bundle.js"></script>

Routes are a good place that you can use code splitting. However, you can also use it for Modals or and any other components. which only get shown when required.