Hogyan végez lusta betöltést az útvonalak/funkciók tekintetében az Angular-ben?

Question

Accepted Answer

A **lazy loading** elhalasztja egy funkció kódjának letöltését, amíg a felhasználó nem navigál hozzá, ahelyett hogy mindent az kezdeti letöltésbe csomagolna. Ez csökkenti a kezdeti csomagot és felgyorsítja az alkalmazás első betöltését.

## Lusta betöltés egy önálló komponens (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),
  },
];
```

A dinamikus `import()` megmondja a build eszköznek, hogy ossza fel a `AdminComponent` saját chunkra, amelyet csak akkor tölthet le, ha a felhasználó felkeresi a `/admin` oldalt.

## Lusta betöltés egy útvonalcsoport

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

A `loadChildren` lusta betöltés egy teljes funkciótartományt (minden útvonalát/komponensét) egyetlen chunkként — a nagy alkalmazások funkciók szerinti felosztásának szokásos módja.

## Az NgModule-alapú forma (régebbi kódbázisok)

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

## Miért javít a teljesítményen

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

A felhasználók csak azt töltik le, amit ténylegesen meglátogatnak — kritikus a nagy vállalati alkalmazások számára, amelyek sok funkciótartománnyal rendelkeznek, melyekből a legtöbbet egy adott felhasználó soha nem nyitja meg.

## Előzetes betöltési stratégiák (mindkettő legjobb)

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

Az előzetes betöltés a háttérben lusta chunkokat hoz az alkalmazás betöltése után, így a kezdeti csomag kicsi marad *és* a későbbi navigáció azonnal megtörtenik. Egyéni stratégiákat is írhat (például csak a valószínű következő útvonalak előzetes betöltése).

## Miért fontos

A lusta betöltés az Angular kezdeti csomagjának kicsi tartása elsődleges technikája, ahogy az alkalmazás nő — lényeges a nagy, multi-funkciós vállalati alkalmazásokhoz, amelyeket az Angular céloz.

Az útvonal/funkció szerinti felosztás (`loadComponent`/`loadChildren`) gyorsabb első betöltéseket jelent, és az előzetes betöltési stratégiával párosítva gyors indítást és rázós navigációt biztosít.

Ez egy standard, nagy hatású teljesítménypraktika bármely jelentős Angular alkalmazásban.