Getting Started

Follow these few steps to get ready with @loadable/component.

Installation

Installing @loadable/component only takes a single command and you're ready to roll:

npm install @loadable/component
# or use yarn
yarn add @loadable/component

@loadable/babel-plugin is required for Server Side Rendering and automatic chunk names generation. @loadable/server and @loadable/webpack-plugin are only required for Server Side Rendering.

Split your first component

Loadable lets you render a dynamic import as a regular component.

import loadable from '@loadable/component'
const OtherComponent = loadable(() => import('./OtherComponent'))
function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  )
}

That's it, OtherComponent will now be loaded in a separated bundle!