Cara Optimasi Lazy Loading Angular untuk Web Lebih Cepat

Pernah nggak sih lo ngerasa aplikasi Angular lo pas awal load itu lemot banget kayak nunggu balesan chat doi yang centang satu? Itu biasanya karena bundle size aplikasi lo kegedean, karena semua komponen dimuat sekaligus pas pertama kali user buka web lo.

Nah, biar web lo punya vibes yang sat-set dan nggak bikin user kabur, kita bakal bahas jurus pamungkasnya: Lazy Loading.

Apa sih Lazy Loading Itu?

Simpelnya, Lazy Loading itu teknik buat nge-load kode cuma pas dibutuhin aja. Jadi, kalo user baru mampir ke homepage, ya udah, aplikasi cuma bakal load modul yang ada di homepage doang. Modul lain kayak Dashboard, Profile, atau Settings bakal disimpen dulu, dan baru di-download pas user klik navigasi ke sana.

Skuy, Kita Praktik!

Dulu kita pake loadChildren pake string, tapi sekarang udah zamannya ES Modules. Jadi, mari kita lihat gimana cara implementasinya di Angular modern.

1. Siapin Modul yang Mau di-Lazy Load Pastikan modul yang mau di-lazy load punya routing-nya sendiri.

// dashboard-routing.module.ts
const routes: Routes = [
  { path: '', component: DashboardComponent }
];

2. Atur di App Routing Module Ini bagian kuncinya, Ngab! Kita pake import() biar bundler (Webpack/Esbuild) paham kalo bagian ini harus dipisah jadi chunk sendiri.

// app-routing.module.ts
const routes: Routes = [
  {
    path: 'dashboard',
    loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)
  }
];

Pro Tips Biar Makin Pro

Biar aplikasi lo makin gacor, coba terapin trik ini:

• Preloading Strategy: Kalo lo mau aplikasi load pas lagi idle (lagi diem), lo bisa pake PreloadAllModules. Jadi setelah halaman utama load, Angular bakal diem-diem nge-download modul lain di background.

  RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  

• Cek Bundle Size: Pake perintah ng build --stats-json terus cek pake Webpack Bundle Analyzer. Lo bakal bisa liat modul mana yang paling "gendut" dan perlu dipecah lagi.
• Jangan Over-splitting: Jangan dikit-dikit di-lazy load. Kalo komponennya cuma seupil, mending masukin ke Main Bundle aja biar nggak kebanyakan HTTP Request.

Kesimpulan

Lazy loading itu kewajiban kalo lo mau bikin aplikasi Angular yang profesional dan ramah sama user experience. Dengan load kode pas dibutuhin aja, initial load aplikasi lo bakal jauh lebih ringan. Web jadi makin smooth, user makin betah, dan lo pun makin keliatan jago!

Gimana, siap bikin aplikasi lo jadi kilat? Skuy lah, langsung praktekin di project lo!