gregberge/loadable-components

The recommended Code Splitting library for React ✂️✨

Summary

Loadable Components is a React library for code splitting, the practice of breaking a JavaScript bundle into smaller pieces that load on demand instead of all at once. It wraps dynamic imports behind a regular component, so large parts of a React app can be deferred until the user actually needs them. The project is MIT licensed and lists server-side rendering (SSR) and React Router among its supported use cases.

What it is useful for

The library targets engineers who want to shrink the initial JavaScript payload that ships to the browser, which directly affects how quickly a page becomes interactive. Common scenarios include:

• Splitting route-level components so users only download the code for the screen they are currently viewing. The README and topic tags explicitly call out React Router integration.
• Deferring heavy UI such as charts, editors, modals, or settings pages until they are rendered for the first time.
• Supporting apps that need SSR, where the server renders the initial markup and the client hydrates, requiring coordination between server and client chunks. The README links to a dedicated Server Side Rendering guide.
• Working alongside webpack's dynamic import() syntax, which the README example uses directly.

The package is published as @loadable/component on npm. The README includes a "small size" badge pointing to a gzip-measured bundle, though the exact figure is rendered through the badge and is not stated in the supplied text.

How engineers can use it

The README documents a minimal getting-started flow:

1. Install the package:

   npm install @loadable/component
   

2. Wrap any module behind a dynamic import() and use the result like a regular component:

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

For SSR setup, preloading, custom loading or fallback UI, and a comparison with React.lazy, the README redirects to https://loadable-components.com rather than reproducing those guides inline. Engineers integrating with SSR or React Router should consult that site, because the supplied README only covers the single-component pattern shown above and explicitly notes that more detailed guidance lives in the external docs.