Module lazy loading preview in Angular - Performance & Optimization

Performance: Module lazy loading preview

HIGH IMPACT

This affects the initial page load speed by deferring loading of feature modules until needed, reducing the amount of code loaded upfront.

Loading feature modules in an Angular app

Angular

const routes = [
  { path: 'feature', loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule) }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Defers loading the feature module until the user navigates to it, reducing initial bundle size and speeding up first paint.

📈 Performance GainReduces initial bundle by 100-300kb, improving LCP by 200-500ms on typical networks.

Loading feature modules in an Angular app

Angular

import { FeatureModule } from './feature/feature.module';

const routes = [
  { path: 'feature', component: FeatureComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Eagerly importing the feature module in the main bundle causes all code to load upfront, increasing initial load time.

📉 Performance CostAdds 100-300kb to initial bundle, blocking rendering longer and delaying LCP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Eager module loading	Low (no extra DOM nodes)	0	High (large JS blocks delay paint)	[X] Bad
Lazy module loading	Low (no extra DOM nodes)	0	Low (smaller initial JS, faster paint)	[OK] Good

Rendering Pipeline

Lazy loading delays fetching and parsing of module code until navigation triggers it. This reduces work during initial Style Calculation and Layout, speeding up Paint and Composite stages.

→Network

→Script Parsing

→Style Calculation

→Layout

→Paint

⚠️ BottleneckScript Parsing and Network loading of large bundles during initial load

Core Web Vital Affected

LCP

This affects the initial page load speed by deferring loading of feature modules until needed, reducing the amount of code loaded upfront.

Optimization Tips

1Always split large feature modules to lazy load them for faster initial load.

2Use Angular Router's loadChildren with dynamic import syntax for lazy loading.

3Verify lazy loading by checking Network panel for deferred JS chunk loading.

Performance Quiz - 3 Questions

What is the main performance benefit of lazy loading Angular modules?

A Blocks rendering until all modules load

B Reduces initial bundle size, improving page load speed

C Increases DOM nodes for faster rendering

D Improves CSS selector performance

DevTools: Network

How to check: Open DevTools > Network tab, reload page, filter by JS files, observe when feature module chunks load (should load only on navigation).

What to look for: Initial JS bundle size is smaller and feature module chunk loads later on demand, confirming lazy loading.