Why split
A single large bundle delays interactivity because the browser must download, parse, and execute everything before the app runs. Code splitting breaks the bundle into smaller chunks.
Lazy loading
Lazy loading defers loading a chunk until it is needed, usually with a dynamic import. A route or a heavy component loads only when the user navigates to it.
- Split by route so each page ships its own chunk.
- Split heavy widgets like charts or editors behind a dynamic import.
- Show a fallback while the chunk loads.
Watch outs
- Too many tiny chunks add request overhead and can slow things down.
- Prefetch likely next chunks so navigation still feels instant.
- Keep shared dependencies in a common chunk so they are not duplicated across routes.
- Always provide a fallback so the user sees feedback while a chunk downloads.
Key idea
Code splitting plus lazy loading ships a small core bundle and defers the rest, cutting time to interactive.