Kepiye carane nglaku-load routes/features ing Angular?

Question

Accepted Answer

**Lazy loading** nunda panyerat kode feature nganti panganggone navigasi marang dheweke, tinimbang gabung kabeh ing panyerat awale. Iki nyuda bundle awale lan nggepat muatan 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 ngandhani alat bangun kanggo mbagi `AdminComponent` dadi kapiangan dhewe, panyerat mung nalika panganggo ngunjungi `/admin`.

## Lazy-loading klompok routes

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

`loadChildren` nglaku-load area feature lengkap (kabeh routes/komponene) minangka siji kapiangan — cara standar kanggo mbagi app gedhe miturut feature.

## Wujud basis-NgModule (codebase luwih lawas)

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

## Napa iku 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
```

Panganggone mung panyerat apa-apa sing bener-bener dikunjungi — penting kanggo app enterprise gedhe kanthi akeh area feature, paling akeh sing panganggo tartamtu ora mbukak.

## Strategi preloading (siji-satunggaling terbaik)

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

Preloading njupuk kapiangan lazy ing latar ngarep sawise aplikasi muat, supaya bundle awale tetep cilik *lan* navigasi sabanjure krasa instan. Sampeyan uga bisa nulis strategi khusus (contone preload mung routes sabanjure ingkang kamungkinan).

## Napa iku penting

Lazy loading minangka cara utama kanggo njaga bundle awale Angular tetep cilik nalika aplikasi berkembang — penting kanggo app enterprise gedhe multi-feature sing Angular target.

Mbagi miturut route/feature (`loadComponent`/`loadChildren`) tegese muatan pertama luwih cepet, lan pasangan karo strategi preloading menehi muatan cepet lan navigasi snappy.

Iku praktik kinerja standar lan dampak-tinggi ing aplikasi Angular salin gedhe.