Kako v Angulariu lenobremeno nalagaš poti/funkcionalnosti?

Question

Accepted Answer

**Lenobremeno nalaganje** odloži prenos kode funkcionalnosti, dokler se uporabnik ne navigira do nje, namesto da bi vse skupaj združil v začetni prenos. To zmanjša začetni paket in pospeši prvo nalaganje aplikacije.

## Lenobremeno nalaganje samostojne komponente (moderna)

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

Dinamični `import()` naroči graditelju orodij, da `AdminComponent` deli v svoj chunk, ki se prenese le, ko se uporabnik obišče `/admin`.

## Lenobremeno nalaganje skupine poti

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

`loadChildren` lenobremeno naloži celo funkcijsko področje (vse njegove poti/komponente) kot en chunk — standardni način za razdelitev velike aplikacije po funkcionalnosti.

## Obrazec, temelječ na NgModule (starejše kodobasne)

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

## Zakaj izboljšuje zmogljivost

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

Uporabniki prenesejo le to, kar dejansko obiskujejo — kritično za velike poslovne aplikacije z številnimi funkcijskimi področji, od katerih jih dano uporabnika večina nikoli ne odpre.

## Predhitavne strategije (najbolje od obeh)

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

Prednalaganje pridobi lenobremene chunke v ozadju po nalaganju aplikacije, tako da začetni paket ostane majhen *in* kasnejša navigacija občuti takojšnje. Napišete lahko tudi lastne strategije (npr. prednaložite le verjetno naslednje poti).

## Zakaj je to pomembno

Lenobremeno nalaganje je primarni način, da ohranite začetni paket Angularja majhen, ko aplikacija raste — bistveno za velike, večfunkcijske poslovne aplikacije, ki jih Angular naslavlja.

Razdelitev po poti/funkcionalnosti (`loadComponent`/`loadChildren`) pomeni hitrejše prvo nalaganje, in če jih kombiniramo s strategijo predhitavanja, dobimo tako hitro začetek kot energično navigacijo.

To je standardna, visoko vplivna praksa zmogljivosti v kateri koli precejšnji aplikaciji Angular.