Code Splitting & Lazy Loading
Large applications should not necessarily ship every route's code on the initial page. Dynamic imports and lazy loading can split code into chunks that are loaded when needed.
Route-level splitting is often a strong default because users commonly visit only a subset of an application's features. Suspense can provide the loading boundary for lazily loaded content.
Code splitting has tradeoffs: too many tiny chunks can create overhead, and a chunk needed immediately can become a network bottleneck. Measure real navigation patterns.
Lazy component
const ReportsPage = lazy(() => import("./ReportsPage"));
function App() {
return (
<Suspense fallback={<p>Loading reports…</p>}>
<ReportsPage />
</Suspense>
);
}đź’ˇ The ReportsPage module can be loaded only when the lazy component is rendered.
Key Takeaways
- Split code around meaningful loading boundaries.
- Use Suspense for loading UI where appropriate.
- Avoid both one giant bundle and excessive fragmentation.