Lazy Loading and Code Splitting

Level: Intermediate

ℹ️ What You'll Learn

• Lazy loading routes
• Feature modules
• Code splitting benefits
• Bundle size optimization
• Preloading strategies

Basic Lazy Loading

export const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  
  {
    path: 'students',
    loadChildren: () => import('./modules/student/student.routes')
      .then(m => m.STUDENT_ROUTES)
  },
  {
    path: 'exams',
    loadChildren: () => import('./modules/exam/exam.routes')
      .then(m => m.EXAM_ROUTES)
  }
];

loadChildren = load routes only when accessed.

Feature Module Routes

// modules/student/student.routes.ts
import { Routes } from '@angular/router';
import { StudentListComponent } from './components/student-list/student-list.component';
import { StudentDetailComponent } from './components/student-detail/student-detail.component';

export const STUDENT_ROUTES: Routes = [
  { path: '', component: StudentListComponent },
  { path: ':id', component: StudentDetailComponent }
];

Feature module contains its own routes.

Preloading Strategy

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes, 
      preloadAllModules() // Preload all lazy routes
    )
  ]
};

Preload lazy routes in background while user works.

Bundle Analysis

# Generate stats file
ng build --stats-json

# Analyze
npm install -g webpack-bundle-analyzer
webpack-bundle-analyzer dist/my-app/stats.json

Shows module sizes and optimize opportunities.

SMS Lazy Loading

export const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  
  {
    path: 'students',
    loadChildren: () => import('./modules/student/student.routes')
      .then(m => m.STUDENT_ROUTES)
  },
  {
    path: 'teachers',
    loadChildren: () => import('./modules/teacher/teacher.routes')
      .then(m => m.TEACHER_ROUTES)
  },
  {
    path: 'exams',
    loadChildren: () => import('./modules/exam/exam.routes')
      .then(m => m.EXAM_ROUTES)
  },
  {
    path: 'fees',
    loadChildren: () => import('./modules/fee/fee.routes')
      .then(m => m.FEE_ROUTES)
  }
];

Each module loads separately → smaller initial bundle.

Key Takeaways

• Lazy loading = load modules on demand
• Reduces initial bundle size
• Feature modules = self-contained sections
• Preload = background loading
• Route lazy loading = most common pattern

💡 Backend Developer Tip

Similar to plugin architecture in C#. Load features only when needed, not upfront.

⚠️ Lazy Loading Issues

1. Circular dependencies — Module A depends on B, B on A
2. Loading delay — First access slower (loading module)
3. Preloading all — Defeats purpose of lazy loading
4. Not in feature module — Services duplicated per module

🤖Use AI to Learn Faster

Use ChatGPT, Claude, or Copilot to go deeper on Lazy Loading. Try these prompts:

• "Why lazy load instead of eager load?"
• "What's cost of lazy loading first access?"
• "How do you share services between lazy modules?"
• "Quiz me on code splitting"

💡 Tip: After reading this article, paste your own code into AI and ask "What could go wrong here and why?" — fastest way to find edge cases and deepen understanding.