React 16.6 introduced React.lazy() and React.Suspense to simplify code splitting. Using a stock list/chart demo app, the post walks through converting a static import to a lazy-loaded component, reducing initial bundle size from 125KB to 36KB and cutting load time from 2470ms to 1546ms. It then covers two preloading strategies: triggering the dynamic import before React.lazy() so the chunk loads in the background, and pre-rendering the component hidden inside a Suspense boundary with a null fallback. Limitations of the hidden-div approach (portals, extra DOM nodes) are discussed, along with ideas for future improvements.

6m read timeFrom medium.com
Post cover image
Table of contents
Lazy-loading a component

Sort: