Bagaimana Anda melakukan lazy-loading rute/fitur di Angular?

Question

Accepted Answer

**Lazy loading** menunda pengunduhan kode fitur hingga pengguna menavigasi ke sana, alih-alih membundel semuanya ke dalam unduhan awal. Ini mengecilkan bundle awal dan mempercepat pemuatan pertama aplikasi.

## Lazy-loading komponen standalone (modern)

```ts
export const routes: Routes = [
  { path: "home", component: HomeComponent },         // eager (in main bundle)
  {
    path: "admin",
    loadComponent: () =>                               // lazy — separate chunk
      import("./admin/admin.component").then(m => m.AdminComponent),
  },
];
```

`import()` dinamis memberi tahu alat build untuk membagi `AdminComponent` ke dalam chunknya sendiri, diunduh hanya ketika pengguna mengunjungi `/admin`.

## Lazy-loading sekelompok rute

```ts
export const routes: Routes = [
  {
    path: "dashboard",
    loadChildren: () =>                                // load a whole feature's routes
      import("./dashboard/dashboard.routes").then(m => m.DASHBOARD_ROUTES),
  },
];
```

`loadChildren` lazy-loads seluruh area fitur (semua rute/komponennya) sebagai satu chunk — cara standar untuk membagi aplikasi besar menurut fitur.

## Formulir berbasis NgModule (basis kode yang lebih lama)

```ts
{
  path: "shop",
  loadChildren: () => import("./shop/shop.module").then(m => m.ShopModule),
}
```

## Mengapa ini meningkatkan performa

```text
Without lazy loading: main.js = Home + Admin + Dashboard + Reports + ... (large, slow)
With lazy loading:    main.js = Home only; other features load on navigation
```

Pengguna hanya mengunduh apa yang mereka kunjungi — penting untuk aplikasi enterprise besar dengan banyak area fitur, sebagian besar yang tidak pernah dibuka oleh pengguna tertentu.

## Strategi pra-pemuatan (yang terbaik dari keduanya)

```ts
provideRouter(routes, withPreloading(PreloadAllModules));
// load lazy chunks in the background AFTER initial load, so navigation is instant
```

Pra-pemuatan mengambil chunk lazy di latar belakang setelah aplikasi memuat, jadi bundle awal tetap kecil *dan* navigasi yang lebih lambat terasa instan. Anda juga dapat menulis strategi khusus (misalnya pra-muat hanya rute berikutnya yang kemungkinan).

## Mengapa ini penting

Lazy loading adalah teknik utama untuk menjaga bundle awal Angular tetap kecil seiring pertumbuhan aplikasi — penting untuk aplikasi enterprise besar multi-fitur yang ditargetkan Angular.

Pemisahan menurut rute/fitur (`loadComponent`/`loadChildren`) berarti pemuatan pertama yang lebih cepat, dan dipasangkan dengan strategi pra-pemuatan memberikan baik awal yang cepat dan navigasi yang responsif.

Ini adalah praktik performa standar dan berdampak tinggi dalam aplikasi Angular berukuran apa pun.