All 5 Performance & Lazy Loading questions
More in Performance & Lazy Loading
How do you check your Angular app's actual bundle size and find opportunities to reduce it? How does the OnPush change detection strategy improve performance in a large Angular application? How does using trackBy, or the track expression in the newer at for syntax, improve the performance of rendering lists? How would you use Angular's built in deferred loading, the at defer block, to improve performance further?
Advertisement
Angular › Performance & Lazy Loading

What is lazy loading in Angular and why is it useful for performance?

Beginner

Answer

Lazy loading means only downloading the code for a specific feature or route when the user actually navigates to it, instead of including everything in the app's initial bundle. This makes the very first page load faster, since the browser only needs to download the code it actually needs right away.
const routes: Routes = [
  { path: 'orders', loadChildren: () => import('./orders/orders.routes') }
];
// The orders feature's code is only downloaded when a user visits the orders route
Real-world example A large admin panel only downloads the code for its rarely visited reports section the first time a user actually navigates there, thanks to lazy loading that specific feature, keeping the initial page load fast for everyone.

Common follow-ups: How much smaller does an app's initial load usually get after adding lazy loading?;What tool shows you how big each lazy loaded chunk actually is?

Routing;Build Environments & Deployment
All 5 Performance & Lazy Loading questions