Lazy loading modules with routes in Angular - Performance & Optimization

Performance: Lazy loading modules with routes

HIGH IMPACT

This affects the initial page load speed by deferring loading of feature modules until their routes are accessed.

Loading feature modules in an Angular app

Angular

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

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

Modules are loaded only when their route is accessed, reducing initial bundle size and speeding up first paint.

📈 Performance GainReduces initial bundle size by 30-70% depending on app size, improving LCP and reducing blocking time.

Loading feature modules in an Angular app

Angular

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

const routes: Routes = [
  { path: 'feature', loadChildren: () => FeatureModule },
  { path: 'dashboard', component: DashboardComponent }
];

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

Eagerly imports FeatureModule, which bundles it into the main chunk despite using loadChildren, causing all code to load upfront.

📉 Performance CostBlocks initial rendering by loading all modules upfront, increasing bundle size and delaying LCP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Eager loading all modules	High (all components loaded)	Multiple (due to large DOM)	High (large initial paint)	[X] Bad
Lazy loading modules with routes	Low initially (only active route DOM)	Single or few (on route change)	Low initial paint cost	[OK] Good

Rendering Pipeline

Lazy loading defers module loading until route activation, so initial style calculation and layout only process minimal code. When navigating, the browser fetches and compiles the module, triggering additional style and layout recalculations.

→Network

→Script Parsing

→Style Calculation

→Layout

→Paint

⚠️ BottleneckInitial bundle size and script parsing delay LCP.

Core Web Vital Affected

LCP

This affects the initial page load speed by deferring loading of feature modules until their routes are accessed.

Optimization Tips

1Always use lazy loading for large feature modules to reduce initial bundle size.

2Avoid importing feature modules eagerly in the main app module.

3Monitor network requests to ensure modules load only when their routes are accessed.

Performance Quiz - 3 Questions

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

A Loads all modules upfront to avoid delays later

B Reduces initial bundle size and speeds up first contentful paint

C Improves CSS selector matching speed

D Prevents any network requests after initial load

DevTools: Network and Performance panels

How to check: Open DevTools, go to Network tab, reload page and observe JS bundle sizes. Then navigate to lazy route and see additional chunks load. Use Performance tab to record load and interaction times.

What to look for: Look for smaller initial JS bundles and deferred loading of route chunks. Check LCP timing improves and fewer long tasks block main thread.