Как вы выполняете отложенную загрузку маршрутов/функций в Angular?

Question

Accepted Answer

**Lazy loading** откладывает загрузку кода функции до того момента, когда пользователь перейдет к ней, вместо того чтобы упаковывать всё в первоначальную загрузку. Это уменьшает размер исходного пакета и ускоряет первую загрузку приложения.

## Отложенная загрузка отдельного компонента (современный подход)

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

Динамический `import()` указывает инструменту сборки разделить `AdminComponent` на отдельный блок, который загружается только при посещении пользователем `/admin`.

## Отложенная загрузка группы маршрутов

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

`loadChildren` выполняет отложенную загрузку всей области функций (все её маршруты/компоненты) как одного блока — стандартный способ разделения крупного приложения по функциям.

## Форма на основе NgModule (старые кодовые базы)

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

## Почему это важно

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

Пользователи загружают только то, что они фактически посещают — критично для крупных корпоративных приложений с множеством областей функций, которые большинство пользователей никогда не открывают.

## Стратегии предварительной загрузки (лучшее из обоих миров)

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

Предварительная загрузка получает отложенные блоки в фоне после загрузки приложения, поэтому исходный пакет остаётся малым *и* последующая навигация кажется мгновенной. Вы также можете написать пользовательские стратегии (например, предварительно загружать только вероятные следующие маршруты).

## Почему это важно

Отложенная загрузка — это основной метод сохранения исходного пакета Angular небольшим по мере роста приложения — необходимо для больших многофункциональных корпоративных приложений, на которые ориентирован Angular.

Разделение по маршруту/функции (`loadComponent`/`loadChildren`) означает более быстрые первоначальные загрузки, а в сочетании со стратегией предварительной загрузки обеспечивает как быстрый старт, так и плавную навигацию.

Это стандартная практика высокого влияния на производительность в любом значительном приложении Angular.