Angular Lazy Loading และ Code Splitting เพิ่ม Performance

Lazy Loading คืออะไร

Lazy Loading คือการโหลด module หรือ component เฉพาะเมื่อ user เข้าถึง route นั้น ช่วยลด initial bundle size ทำให้ app โหลดเร็วขึ้น

Lazy Loading Component (Standalone)

// app.routes.ts
export const routes: Routes = [
  {
    path: 'dashboard',
    loadComponent: () =>
      import('./dashboard/dashboard.component')
        .then(m => m.DashboardComponent)
  },
  {
    path: 'admin',
    loadChildren: () =>
      import('./admin/admin.routes')
        .then(m => m.adminRoutes)
  }
];

Preloading Strategy

import { PreloadAllModules, provideRouter, withPreloading } from '@angular/router';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(
      routes,
      withPreloading(PreloadAllModules)
    )
  ]
});

Custom Preloading

import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, of } from 'rxjs';

export class SelectivePreloading implements PreloadingStrategy {
  preload(route: Route, load: () => Observable<any>): Observable<any> {
    return route.data?.['preload'] ? load() : of(null);
  }
}

// routes
{
  path: 'popular',
  loadComponent: () => import('./popular.component').then(m => m.PopularComponent),
  data: { preload: true }
}

Defer Block (Angular 17+)

@defer (on viewport) {
  <app-heavy-chart />
} @placeholder {
  <div>กำลังโหลด...</div>
} @loading {
  <app-spinner />
} @error {
  <p>โหลดไม่สำเร็จ</p>
}

วิเคราะห์ Bundle Size

ng build --stats-json
npx webpack-bundle-analyzer dist/stats.json

สรุป

Lazy Loading เป็น must-have สำหรับ Angular app ขนาดใหญ่ ใช้ loadComponent สำหรับ standalone และ @defer สำหรับ component ที่ไม่ต้องโหลดทันทีครับ