Lazy loading is one of the highest-leverage performance techniques in Angular. Done well, it can cut your initial bundle by 40–60%, dramatically improve Time to Interactive, and make your app feel fast even as it grows. Done poorly, it becomes a source of subtle bugs, missed splits, and false confidence.
This guide covers everything, from the fundamentals of route-level splitting to @defer blocks, preloading strategies, and bundle auditing, using the patterns that work in Angular 17+ with standalone components.
What is lazy loading and why it matters
When Angular compiles your app, it bundles everything into JavaScript chunks. Without lazy loading, every component, service, and library ships in one initial bundle. The browser must download, parse, and execute all of it before the user sees anything interactive.
Lazy loading breaks the app into smaller chunks that are fetched on demand , when the user navigates to a route, or when a UI element enters the viewport. The browser only pays for what the user actually needs.
