Hvordan lazy-loader du ruter/features i Angular?

Question

Accepted Answer

**Lazy loading** udskyder hentning af en features kode, indtil brugeren navigerer til den, i stedet for at bundtale alt i det oprindelige download. Dette formindsker det oprindelige bundle og øger appens første lastning.

## Lazy-loading af en standalone komponent (moderne)

```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),
  },
];
```

Det dynamiske `import()` fortæller build-værktøjet at opdele `AdminComponent` i sit eget chunk, som kun hentes, når brugeren besøger `/admin`.

## Lazy-loading af en gruppe af ruter

```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-loader et helt feature-område (alle dets ruter/komponenter) som ét chunk — standardmåden at opdele en stor app efter feature.

## Den NgModule-baserede form (ældre kodebaser)

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

## Hvorfor det forbedrer ydeevnen

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

Brugere henter kun det, de rent faktisk besøger — kritisk for store enterprise-apps med mange feature-områder, som de fleste brugere aldrig åbner.

## Preloading-strategier (det bedste af begge)

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

Preloading henter lazy chunks i baggrunden efter appen hentes, så det oprindelige bundle bliver småt *og* senere navigation føles øjeblikkelig. Du kan også skrive brugerdefinerede strategier (f.eks. preload kun sandsynlige næste ruter).

## Hvorfor det betyder noget

Lazy loading er den primære teknik til at holde Angulars oprindelige bundle småt, når appen vokser — vigtig for de store, multi-feature enterprise-apps Angular målretter.

Opdeling efter rute/feature (`loadComponent`/`loadChildren`) betyder hurtigere første indlæsninger, og ved at kombinere med en preloading-strategi får du både en hurtig start og responsiv navigation.

Det er en standard, høj-impact ydelses-praksis i enhver større Angular-applikation.