Why split the bundle
Code splitting breaks a single large bundle into smaller chunks that load on demand. Without it, every user downloads all the code for the whole app before seeing the first page, even routes they never visit.
- A dynamic import marks a split point where a chunk is created.
- The chunk loads only when that code path runs.
- Initial load shrinks to just what the first view needs.
Common strategies
Teams split along boundaries that match how users actually navigate.
- Route based splitting loads each page chunk when the route opens.
- Component based splitting lazy loads heavy widgets like charts or editors.
- Vendor splitting separates rarely changing libraries so they cache across deploys.
The goal is a small initial download and on demand loading of the rest. The tradeoff is added requests and the need for loading states while a chunk arrives, so over splitting into many tiny chunks can hurt. Splitting along real navigation boundaries gives the best balance.
Key idea
Code splitting carves one bundle into chunks loaded on demand along route, component, and vendor boundaries, shrinking initial download in exchange for extra requests and loading states you must design for.