React code splitting made easy. Reduce your bundle size without stress ✂️✨.

Read the intro blogpost

1npm install loadable-components

Webpack allows modern code splitting via the dynamic import syntax. loadable-components makes it possible to use that awesome feature with React components. It is compatible with react-router and server side rendering. The API is designed to be as simple as possible to avoid useless complexity and boilerplate.

We use it in production on our website, it's open source https://github.com/smooth-code/website.

Motivation

Splitting your React application and rendering it server-side is complicated. Several have tried, react-router gave up, today only next.js is doing it right. First I decided to not do it (afraid by react-router 😱) on my website. But then I think "Fuck code splitting shouldn't be a problem today, let's do it.".

I tried several solutions, react-async-components, react-loadable and for each of them server-side rendering is very complicated. I decided to create loadable-components with for main goal: reducing API in order to make it as easier as possible for the developer. I inspired from styled-components and Apollo for the API and loadable-components was born.

Getting started

1// Routes.js
2export const Home = loadable(() => import('./Home'))
3export const About = loadable(() => import('./About'))
4export const Contact = loadable(() => import('./Contact'))

1// App.js
2import React from 'react'
3import { Route } from 'react-router'
4import * as Routes from './Routes'
5
6export default () =>
7  <div>
8    <Route exact path="/" component={Routes.Home} />
9    <Route path="/about" component={Routes.About} />
10    <Route path="/contact" component={Routes.Contact} />
11  </div>

Custom loading

It is possible to add a custom loading component, by default it will render nothing:

1export const Home = loadable(() => import('./Home'), {
2  LoadingComponent: (props) => <div>Loading...</div>,
3})

Error handling

You can configure the component rendered when an error occurs during loading, by default it will render nothing:

1export const Home = loadable(() => import('./Home'), {
2  ErrorComponent: ({ error, props }) => <div>Oups an error occurs.</div>,
3})

Delay

To avoid flashing a loader if the loading is very fast, you could implement a minimum delay. There is no built-in API in loadable-components but you could do it using p-min-delay.

1import loadable from 'loadable-components'
2import pMinDelay from 'p-min-delay'
3
4// Wait a minimum of 200ms before loading home.
5export const Home = loadable(pMinDelay(() => import('./Home'), 200))

If you want to avoid these delay server-side:

1import loadable from 'loadable-components'
2import pMinDelay from 'p-min-delay'
3
4const delay = (promise) => {
5  if (typeof window === 'undefined') return promise
6  return pMinDelay(promise, 200)
7}
8
9export const Home = loadable(delay(() => import('./Home')))

Timeout

Infinite loading is not good for user experience, to avoid it implementing a timeout is a good workaround. You can do it using a third party module like promise-timeout:

1import loadable from 'loadable-components'
2import { timeout } from 'promise-timeout'
3
4// Wait a maximum of 2s before sending an error.
5export const Home = loadable(timeout(() => import('./Home'), 2000))

Prefetching

To enhance user experience you can fetch routes before they are requested by the user.

Prefetch on route loading

1import React from 'react'
2import { Contact } from './Routes'
3
4Contact.load()
5
6export default () => <div>Hello</div>

Prefetch on hover

1import React from 'react'
2import { Contact } from './Routes'
3
4export default () =>
5  <div>
6    <Link
7    <Link to="/contact" onHover={Contact.load}>Contact</Link>
8  </div>

Server-side rendering

First create a Routes.js containing all your loadable routes:

1// Routes.js
2import loadable from 'loadable-components'
3
4export const Home = loadable(() => import('client/Home'))

You can use them in your application:

1// App.js
2import React from 'react'
3import { Home } from './Routes'
4
5const App = () =>
6  <div>
7    <Route exact path="/" component={Home} />
8  </div>

Then bootstrap your application client-side using loadComponents:

1// main.js
2import React from 'react'
3import ReactDOM from 'react-dom'
4import { BrowserRouter } from 'react-router-dom'
5import { loadComponents } from 'loadable-components'
6import App from './App'
7
8// Load all components needed before starting rendering
9loadComponents().then(() => {
10  ReactDOM.render(
11    <BrowserRouter>
12      <App />
13    </BrowserRouter>,
14    document.getElementById('main'),
15  )
16})

The only thing you have to do on the server is calling getLoadableState() and inserting the loadable state in your html:

1// server.js
2import React from 'react'
3import { renderToString } from 'react-dom/server'
4import { StaticRouter } from 'react-router'
5import { getLoadableState } from 'loadable-components/server'
6import App from './App'
7
8let context = {}
9
10const app = (
11  <StaticRouter location={...} context={context}>
12    <App />
13  </StaticRouter>
14)
15
16// Extract loadable state from application tree
17getLoadableState(app).then(loadableState => {
18  const html = renderToString(<YourApp />)
19  // Insert style tag into page
20  const page = `
21    <!doctype html>
22    <html>
23    <head></head>
24    <body>
25      <div id="main">${html}</div>
26      ${loadableState.getScriptTag()}
27    </body>
28    </html>
29  `
30})

Configuring Babel

Dynamic import syntax is natively supported by Webpack but not by node. That's why you have to configure Babel differently for server and client:

• Use babel-plugin-syntax-dynamic-import on the client.
• Use babel-plugin-dynamic-import-node on the server.

To have a different configuration for client and server, you can use Babel env option.

API Reference

loadable

This is the default export. It's a factory used to create a loadable component. Props are passed to the loaded component.

Arguments

1. getComponent (Function): Function to load component asynchronously.
2. options (Object): Facultative options to configure component behavior.

options

1. ErrorComponent (ReactComponent): Component rendered when an error occurs, take two props: error and props.
2. LoadingComponent (ReactComponent): Component rendered during loading, take the same props from loadable component.

1import loadable from 'loadable-components'
2
3const MyLoadableComponent = loadable(() => import('./MyComponent'), {
4  ErrorComponent: ({ error }) => <div>{error.message}</div>,
5  LoadingComponent: () => <div>Loading...</div>,
6})

loadComponents

This method is only required if you use server-side rendering. It loads components used in the page that has been rendered server-side.

1import React from 'react'
2import ReactDOM from 'react-dom'
3import { BrowserRouter } from 'react-router-dom'
4import { loadComponents } from 'loadable-components'
5import App from './App'
6
7// Load all components needed before starting rendering
8loadComponents().then(() => {
9  ReactDOM.render(
10    <BrowserRouter>
11      <App />
12    </BrowserRouter>,
13    document.getElementById('main'),
14  )
15})

getLoadableState

This method is only required if you use server-side rendering. It loads components recursively and extract a loadable state from a React tree.

1import React from 'react'
2import { renderToString } from 'react-dom/server'
3import { StaticRouter } from 'react-router'
4import { getLoadableState } from 'loadable-components/server'
5import App from './App'
6
7const app = (
8  <StaticRouter>
9    <App />
10  </StaticRouter>
11)
12
13// Extract loadable state from application tree
14getLoadableState(app).then(loadableState => {
15  const html = renderToString(<YourApp />)
16  // Insert style tag into page
17  const page = `
18    <!doctype html>
19    <html>
20    <head></head>
21    <body>
22      <div id="main">${html}</div>
23      ${loadableState.getScriptTag()}
24    </body>
25    </html>
26  `
27})

A loadable state has two methods to extract state:

• loadableState.getScriptTag(): Returns a string representing a script tag.
• loadableState.getScriptElement(): Returns a React element.

Interoperability

You can implement a loadable component by your own. To do it you have to add LOADABLE Symbol to your component:

1import React from 'react'
2import { LOADABLE } from 'loadable-components'
3
4class ComponentWithTranslations extends React.Component {
5  // Required
6  static componentId = 'custom-loadable'
7  static async load = () => {
8    const response = await fetch('/translations.json')
9    const translations = await response.json()
10    ComponentWithTranslations.translations = translations
11    return translations
12  }
13
14  state = { translations: ComponentWithTranslations.translations }
15
16  componentWillMount() {
17    ComponentWithTranslations[LOADABLE].load()
18    .then(translations => this.setState({ translations }))
19  }
20
21  render() {
22    const { translations = { hello = 'hello' } } = this.props;
23
24    return <div>{hello}</div>
25  }
26}
27
28ComponentWithTranslations[LOADABLE] = () => ({
29  componentId: 'custom-loadable',
30  load: async () => {
31    const response = await fetch('/translations.json')
32    const translations = await response.json()
33    ComponentWithTranslations.translations = translations
34  }
35})

Other solutions

react-loadable offers an elegant API to load a component and enhance it. It supports a lot of features like delay and timeout. I chose to not implement it because it delay can be done in LoadingComponent and timeout can be done in getComponent function.

react-async-component offers a simple API, very similar to loadable-components API.

react-code-splitting is the basic approach of an async component, it doesn't support LoadingComponent, ErrorComponent and server-side rendering.

The main difference between these two libraries is the server-side rendering approach:

• react-loadable requires a babel plugin. I think it's too complicated and we should not rely on it.
• react-async-component has a better approach, analyzing tree + context, it also rely on another library. I like the idea but not the API.

loadable-components has a simpler approach, it relies on dynamic-import-specification and assumes that it is working for node and Webpack. Then it analyzes the tree server-side and waiting for every modules to be loaded. Client-side it loads modules before rendering the application. The API is as simple as possible, no context, no babel plugin, no magic variable.

Inspirations

• API inspired by styled-components
• React tree traversing from react-apollo

MIT