Jak v Angular líně načítáte trasy/funkce?

Question

Accepted Answer

**Líné načítání** odkládá stažení kódu funkce, dokud se uživatel na něj nenaviguje, místo aby se vše balilo do počáteční stažení. To zmenší počáteční balík a zrychlí první načtení aplikace.

## Líné načítání samostatné komponenty (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),
  },
];
```

Dynamický `import()` sděluje nástroji build, aby rozdělil `AdminComponent` do vlastního balíčku, který se stáhne pouze když uživatel navštíví `/admin`.

## Líné načítání skupiny tras

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

`loadChildren` líně načítá celou funkční oblast (všechny její trasy/komponenty) jako jeden balíček — standardní způsob, jak rozdělit velkou aplikaci podle funkce.

## Forma založená na NgModule (starší kódové základy)

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

## Proč to zlepšuje výkon

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

Uživatelé stahují pouze to, co skutečně navštíví — důležité pro velké podnikové aplikace s mnoha funkčními oblastmi, z nichž většinu daný uživatel nikdy neotevře.

## Strategie předběžného načítání (nejlepší z obojího)

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

Předběžné načítání načítá líné balíčky na pozadí poté, co se aplikace načte, takže počáteční balík zůstává malý *a* pozdější navigace se cítí okamžitě. Můžete si také napsat vlastní strategie (např. předběžné načítání pouze pravděpodobných dalších tras).

## Proč na tom záleží

Líné načítání je primární technikou pro udržení malého počátečního balíku Angular, jak aplikace roste — nezbytné pro velké, vícefunkční podnikové aplikace, na které Angular cílí.

Rozdělení podle trasy/funkce (`loadComponent`/`loadChildren`) znamená rychlejší prvotní načtení a párování se strategií předběžného načítání poskytuje jak rychlý start, tak bezproblémovou navigaci.

Jde o standardní, vysoce účinnou praxi výkonu v jakékoli značné aplikaci Angular.