Hvordan lazy-laster du ruter/funksjoner i Angular?

Question

Accepted Answer

**Lazy loading** utsetter nedlastingen av en funksjons kode til brukeren navigerer til den, i stedet for å pakke alt inn i det første nedlastingsøyeblikket. Dette minsker den opprinnelige bunten og øker hastigheten på appens første lasting.

## Lazy-lasting av en frittstående 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),
  },
];
```

Den dynamiske `import()` forteller byggeverktøyet å dele `AdminComponent` inn i sin egen chunk, som bare lastes ned når brukeren besøker `/admin`.

## Lazy-lasting av en gruppe 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-laster et helt funktionsområde (alle dets ruter/komponenter) som en enkelt chunk — standardmåten å dele en stor app etter funksjon.

## NgModule-basert form (eldre codebases)

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

## Hvordan det forbedrer ytelsen

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

Brukere laster bare ned det de faktisk besøker — kritisk for store bedriftsapper med mange funksjonsområder, hvorav de fleste en gitt bruker aldri åpner.

## Preloading-strategier (det beste fra begge verdener)

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

Preloading henter lazy chunks i bakgrunnen etter at appen har lastet, slik at den opprinnelige bunten forblir liten *og* senere navigering føles øyeblikkelig. Du kan også skrive egne strategier (f.eks. preload bare sannsynlige neste ruter).

## Hvorfor det betyr noe

Lazy loading er den primære teknikken for å holde Angulars opprinnelige bunt liten etter hvert som appen vokser — essensielt for de store, multi-funksjons bedriftsappene Angular retter seg mot.

Deling etter rute/funksjon (`loadComponent`/`loadChildren`) betyr raskere første lasting, og når det kombineres med en preloading-strategi gir det både en rask start og smidig navigering.

Det er en standard, høy-impact ytelsespraksis i enhver betydelig Angular-applikasjon.