Jak leniwie ładujesz trasy/funkcje w Angular?

Question

Accepted Answer

**Lazy loading** odkłada pobieranie kodu funkcji do momentu, gdy użytkownik do niej nawiguje, zamiast pakowania wszystkiego w początkowe pobieranie. Zmniejsza to początkowy pakiet i przyspiesza pierwszy ładunek aplikacji.

## Leniwe ładowanie samodzielnego komponentu (nowoczesne)

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

Dynamiczny `import()` mówi narzędziu kompilacji, aby podzieliło `AdminComponent` na jego własny chunk, pobierany tylko wtedy, gdy użytkownik odwiedzi `/admin`.

## Leniwe ładowanie grupy 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` leniwie ładuje całą obszar funkcji (wszystkie jego trasy/komponenty) jako jeden chunk — standardowy sposób podzielenia dużej aplikacji według funkcji.

## Formularz oparty na NgModule (starsze bazy kodu)

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

## Dlaczego to ważne

```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żytkownicy pobierają tylko to, co faktycznie odwiedzają — krytyczne dla dużych aplikacji korporacyjnych z wieloma obszarami funkcji, z których większość dany użytkownik nigdy nie otwiera.

## Strategie preladowania (najlepsze z obu światów)

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

Preladowanie pobiera leniwe chunks w tle po załadowaniu aplikacji, aby początkowy pakiet pozostał mały *i* późniejsza nawigacja była natychmiastowa. Możesz również napisać niestandardowe strategie (np. preload tylko prawdopodobne następne trasy).

## Dlaczego to ważne

Lazy loading jest główną techniką utrzymania małego początkowego pakietu Angular w miarę wzrostu aplikacji — niezbędne dla dużych, wielofunkcyjnych aplikacji korporacyjnych, które Angular obsługuje.

Podzielenie według trasy/funkcji (`loadComponent`/`loadChildren`) oznacza szybsze początkowe ładowania, a w połączeniu ze strategią preladowania zapewnia zarówno szybki start, jak i płynną nawigację.

To standardowa, wysokoimpaktowa praktyka wydajnościowa w każdej znacznej aplikacji Angular.