How I used React-Loadable to more than halve my React app's load time
Tags: webperf, javascript, react
Published: 2020-02-26 05:33:00

---
title: "How I used React-Loadable to more than halve my React app's load time"
published: true
description: "Chances are, your React app's bundle is much, much larger than it needs to be."
tags: ["webperf","javascript","react"]
canonical_url: https://maxrozen.com/2020/02/26/react-loadable-half-react-app-load-time
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ijctf8cxoq0zusey4ayn.jpg
---


[React-Loadable](https://github.com/jamiebuilds/react-loadable) provides you with a component you can use to load a React component later, rather than immediately as you load the React app.

## Why would I want to load a component later?

For example, lets say you've inherited a project from another engineer, and they've decided to use [moment.js](https://momentjs.com/) in one of the components.

The output of your webpack build gives you these chunk files, with the main one being 500kB. Of this massive bundle, 65.9kB belongs to the minified + gzipped moment.js library.

Since you're only using the component in a couple of places, it doesn't really make sense to load moment.js immediately as your users load your app. After all, they may not even use the component that uses moment.js!

If instead, you wrapped your component in `Loadable`, your main bundle would be (roughly) 65.9kB smaller, and only the people that need your component that uses moment.js would download that bundle.

## How do I use it?

First, install it:

```
yarn add react-loadable
```

or

```
npm install react-loadable
```

React-Loadable lets you wrap your massive component like this:

```js
import Loadable from 'react-loadable';
import Loading from './my-loading-component';

const LoadableComponent = Loadable({
  loader: () => import('./my-massive-component'),
  loading: Loading,
});

export default class App extends React.Component {
  render() {
    return <LoadableComponent />;
  }
}
```

Resulting in a much smaller initial load time for your React app.

`<LoadableComponent>` doesn't have to be in your App file, it can be anywhere in your component hierarchy.

## Halving my React app's load time

Using the above approach was all I needed to shave 200KB from the main bundle of the performance monitoring tool I built ([PerfBeacon](https://perfbeacon.com)).

Results:

| ![PerfBeacon results when using react-loadable](https://dev-to-uploads.s3.amazonaws.com/i/f61you6ae2rr5khn4ne6.png) |
| :-----------------------------------------------------------------------------------------------: |
|         _Shaving 200KB off PerfBeacon's initial bundle reduced the TTI by more than half_         |

More specifically, I combined `react-loadable` with `react-router-dom` to split my bundle by the routes of my web app, resulting in a dozen or so Loadable components like this one:

```js
// pages.js
export default pages = {
  NotFound: Loadable({
    loader: () => import('./NotFound'),
    loading: Loading,
  });
}
```

While this is great for a start, there's still quite a bit more optimisation work to be done here.

Jamie has a much more [in-depth explanation](https://github.com/jamiebuilds/react-loadable#route-based-splitting-vs-component-based-splitting) but essentially, any place with tabs, modals, or even low priority content at the bottom of a page can benefit from using react-loadable.

## Conclusion

So that's how you can use react-loadable to massively speed up your react app.

Do you manually test your web performance? Do you wish you didn't have to? I'd love to help!

I built [PerfBeacon.com](https://perfbeacon.com) to automatically test web performance after each deployment.