jamiebuilds/react-loadable

React Loadable is a small library for React apps that helps developers split their code into smaller pieces so the browser does not have to download everything up front. As single-page apps grow, the bundle a visitor downloads on first page-load gets bigger and slower, code-splitting is the practice of breaking that bundle into several smaller ones and loading each piece only when it is needed. React Loadable's job is to make that splitting easy at the level of individual components rather than only at the level of routes. The library is built around a higher-order component, a function that takes a normal component and returns a new wrapped one with extra behaviour. You hand it a loader function that performs a dynamic import (a standardised way to fetch a JavaScript module on demand) and a loading component to show while the real one is being fetched. The wrapped component renders the loading placeholder, kicks off the fetch, and swaps in the real component once it arrives. The README points out the same approach works for modals, tabs and any part of the interface hidden until the user reveals it, and that React Loadable also covers awkward cases like import failures and server-side rendering. Someone would reach for this when their React bundle has grown large enough to hurt initial load time and they want to defer loading parts of the interface users may never see. The README's testimonials describe drops in main-bundle size of tens to over a hundred kilobytes after adopting it. The repository's primary language is JavaScript, listed topics include code-splitting and server-side rendering, and the full README is longer than what was provided here.