What it is
Lazy loading defers downloading a route's code until the user actually navigates there. The bundler creates a separate chunk per route, and the router requests it on demand.
Why split
- The initial bundle ships only what the first screen needs.
- Rarely visited routes like admin panels never load for most users.
- Time to interactive improves because less JavaScript parses up front.
The flow
- A dynamic import marks a route as a split point.
- On navigation the router fetches the chunk over the network.
- While loading, a fallback such as a spinner shows.
The cost
The first visit to a lazy route waits for a network round trip. Mitigate this by prefetching likely routes during idle time and by showing a meaningful loading state.
Why it matters
Lazy loading trades a small per route delay for a much faster first paint, which is the metric users feel most on initial load.
Key idea
Lazy loading splits routes into chunks fetched on demand, shrinking the initial bundle at the cost of a one time load when first visited.