Bagaimanakah anda memuatkan secara malas route/ciri dalam Angular?

Question

Accepted Answer

**Pemuatan malas** menangguhkan pengunduhan kod ciri sehingga pengguna menavigasi kepadanya, daripada menggabungkan semuanya ke dalam muat awal. Ini mengurangkan bundle awal dan mempercepat muatan pertama aplikasi.

## Pemuatan malas komponen tersendiri (moden)

```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()` dinamik memberitahu alat bina untuk membahagi `AdminComponent` ke dalam bahagian tersendirinya, dimuat turun hanya apabila pengguna melawat `/admin`.

## Pemuatan malas kumpulan laluan

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

`loadChildren` memuatkan malas seluruh kawasan ciri (semua laluan/komponen) sebagai satu bahagian — cara piawai untuk membahagi aplikasi besar mengikut ciri.

## Bentuk berasaskan NgModule (pangkalan kod lebih lama)

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

## Mengapa ia penting

```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 memuat turun apa yang mereka lawati — penting bagi aplikasi perusahaan besar dengan banyak kawasan ciri, kebanyakannya pengguna tertentu tidak pernah membuka.

## Strategi pramuat (yang terbaik dari keduanya)

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

Pramuat mengambil bahagian malas di latar belakang setelah aplikasi dimuat, jadi bundle awal tetap kecil *dan* navigasi kemudian terasa serta-merta. Anda juga boleh menulis strategi tersuai (cth. hanya pramuat laluan berikutnya yang berkemungkinan).

## Mengapa ia penting

Pemuatan malas adalah teknik utama untuk memastikan bundle awal Angular tetap kecil apabila aplikasi berkembang — penting bagi aplikasi perusahaan besar berbilang ciri yang menjadi sasaran Angular.

Membahagi mengikut laluan/ciri (`loadComponent`/`loadChildren`) bermakna muatan pertama lebih cepat, dan berpasangan dengan strategi pramuat memberikan permulaan cepat dan navigasi yang lancar.

Ini adalah amalan prestasi piawai dan berkesanan tinggi dalam sebarang aplikasi Angular yang bersaiz besar.