Hur gör du lazy-loading av rutter/funktioner i Angular?

Question

Accepted Answer

**Lazy loading** skjuter upp nedladdningen av en funktions kod tills användaren navigerar till den, istället för att samla allt i den ursprungliga nedladdningen. Detta minskar det initiala paketet och påskyndar appens första laddning.

## Lazy-loading av en fristående komponent (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),
  },
];
```

Den dynamiska `import()` säger till byggverktyget att dela upp `AdminComponent` i sitt eget chunk, som bara laddas ned när användaren besöker `/admin`.

## Lazy-loading av en grupp av rutter

```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-loadar ett helt funktionsområde (alla dess rutter/komponenter) som ett chunk — standardsättet att dela upp en stor app efter funktion.

## Den NgModule-baserade formen (äldre kodbasar)

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

## Varför det förbättrar prestandan

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

Användare laddar bara ned det de faktiskt besöker — kritiskt för stora enterprise-appar med många funktionsområden, varav en given användare aldrig öppnar de flesta.

## Förladningsstrategier (det bästa av båda)

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

Förladning hämtar lazy chunks i bakgrunden efter att appen laddat, så det initiala paketet förblir litet *och* senare navigering känns omedelbar. Du kan också skriva anpassade strategier (t.ex. förladda endast sannolika nästa rutter).

## Varför det är viktigt

Lazy loading är den primära tekniken för att hålla Angulars initiala paket litet när appen växer — väsentlig för de stora, multi-funktionella enterprise-appar som Angular riktar sig till.

Oppdelning efter rutt/funktion (`loadComponent`/`loadChildren`) betyder snabbare första laddningar, och sammankopplat med en förladningsstrategi ger både en snabb start och smidig navigering.

Det är en standard, högpåverkande prestandapraxis i alla större Angular-applikationer.