Lazy loading

Lazy loading delays downloading a part of an application, such as a route or a heavy component, until the user actually needs it.

Without lazy loading, the browser downloads the code for every screen before it shows the first one. With it, the bundler splits the application into chunks, and each chunk is fetched on demand through a dynamic import(). The initial download shrinks to what the first screen needs.

Angular offers two main forms. The router can load a component or a group of routes when the user navigates to a path. Inside a template, a @defer block can load part of a view when it becomes visible, on interaction or on another trigger.

Example

export const routes: Routes = [
  { path: '', component: HomeComponent },
  {
    path: 'reports',
    loadComponent: () =>
      import('./reports/reports.component').then(m => m.ReportsComponent),
  },
];

The charting library used by the reports screen ends up in the reports chunk. Users who never open reports never download it.

Common misunderstanding

Lazy loading is often expected to make the application smaller. The total amount of code stays the same, and part of the download moves to a later moment. If the chunk for a common screen is large, the user waits at navigation time. Too many tiny chunks cause a chain of requests. Preloading helps: the application fetches likely chunks in the background after the first render.

It is also easy to break the split by accident. A single static import of something from the lazy area, placed in eagerly loaded code, pulls that code back into the main bundle. Check the bundle report after changes.

Lazy loading and micro-frontends are related and different. A lazy chunk is built and deployed together with its application. A remote is also loaded on demand, and it is built and deployed separately. See micro-frontends for that distinction.

Related terms

• Tree shaking
• Standalone components
• Module Federation