One bundle is too much
A single large JavaScript bundle forces every user to download every feature before the page becomes interactive. Code splitting breaks that bundle into smaller chunks loaded on demand.
- Entry splitting: separate bundles per page entry point.
- Route based splitting: each route loads its own chunk when navigated to.
- Component splitting: heavy widgets load only when rendered.
Dynamic import
The dynamic import expression returns a promise for a module, which signals the bundler to create a separate chunk.
- The chunk downloads only when that import runs.
- A loading state covers the gap while the chunk arrives.
- Frameworks wrap this in lazy loading helpers with suspense boundaries.
Split along natural boundaries such as routes and rarely used modals. Over splitting creates many tiny requests that add overhead, so balance chunk count against chunk size. Pair splitting with prefetching so the next chunk arrives before the user needs it.
Key idea
Use dynamic import at route and feature boundaries so users fetch only the code their path requires.