The problem with one bundle
When an app ships as a single large bundle, every visitor downloads code for pages they may never open. Code splitting breaks that bundle into smaller chunks that load only when needed. Splitting along routes is the most natural boundary because users arrive at one page at a time.
- The initial download shrinks to what the first page requires.
- Other pages load their code when the user navigates to them.
- The total bytes are similar, but they arrive spread out and on demand.
How route splitting works
A bundler sees a dynamic import for a route component and emits a separate chunk for it. When the user navigates, the router requests that chunk, shows a fallback while it loads, then renders the page.
- Dynamic imports mark the split points.
- The router triggers the load on navigation.
- A fallback keeps the interface responsive during the fetch.
Getting it right
- Split at the route level first, since it gives the biggest win for the least effort.
- Prefetch the likely next route so navigation still feels instant.
- Avoid splitting tiny components, where overhead outweighs savings.
Key idea
Code splitting by route loads each page's code on demand, shrinking the initial download while keeping navigation fast through prefetching.