Kako lenjo opteretite rutas/značajke u Angular-u?

Question

Accepted Answer

**Lazy loading** odgađa preuzimanje koda značajke dok korisnik ne navigira do nje, umjesto da sve paketira u početno preuzimanje. To smanjuje početni paket i ubrzava prvu učitavanja aplikacije.

## Lazy-loading samostalne 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čki `import()` govori build alatu da podijeli `AdminComponent` u vlastiti chunk, preuzet samo kada korisnik posjetit `/admin`.

## Lazy-loading grupe ruta

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

`loadChildren` ljenjo učitava čitavo područje značajke (sve njene rute/komponente) kao jedan chunk — standardni način da se velika aplikacija razdijeli po značajkama.

## NgModule-utemeljena forma (stariji kodovi)

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

## Zašto poboljšava performanse

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

Korisnici preuzimaju samo ono što doista posjetite — kritično za velike enterprise aplikacije s mnogim područjima značajki, od kojih većinu dati korisnik nikada ne otvori.

## Strategije prethodnog učitavanja (najbolje od oboga)

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

Proethodno učitavanje dohvaća ljenj chunke u pozadini nakon što se aplikacija učita, pa početni paket ostaje mali *i* kasnija navigacija osjeća se trenutačno. Također možete pisati prilagođene strategije (npr. prethodno učitajte samo vjerojatne sljedeće rute).

## Zašto je važno

Lazy loading je primarni tečaj za održavanje Angular-ovog početnog paketa malenim kako aplikacija raste — neophodno za velike, multi-značajkaste enterprise aplikacije koje Angular cilja.

Razdvajanje po ruti/značajki (`loadComponent`/`loadChildren`) znači brže prve učitavanja, a pariranje sa strategijom prethodnog učitavanja daje i brz početak i energičnu navigaciju.

To je standardna, visoko utjecajna praksa performansi u bilo kojoj znatnoj Angular aplikaciji.