Что такое lazy routes в Angular?

Lazy routes (ленивые маршруты) — это подход в Angular, при котором код определённого раздела приложения не попадает в основной бандл, а подгружается отдельным чанком только в момент перехода пользователя на соответствующий маршрут. Это напрямую влияет на скорость первой отрисовки: чем меньше стартовый бандл, тем быстрее приложение становится интерактивным.

Как это работает

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

// app-routing.module.ts
const routes: Routes = [
  { path: 'home', component: HomeComponent },
  {
    path: 'admin',
    loadChildren: () =>
      import('./admin/admin.module').then(m => m.AdminModule)
  }
];

// admin-routing.module.ts
const adminRoutes: Routes = [
  { path: '', component: AdminDashboardComponent },
  { path: 'users', component: UsersComponent }
];

Когда применять

• В приложениях с несколькими крупными разделами (админка, кабинет, публичная часть).
• Когда часть функционала нужна только определённой категории пользователей.
• Для тяжёлых зависимостей, которые не нужны на старте (графики, редакторы, карты).

Важно помнить, что ленивая загрузка добавляет небольшую задержку при первом переходе на раздел, поэтому критичные для UX экраны лучше оставлять в основном бандле или использовать предзагрузку стратегией PreloadAllModules.

Итог: lazy routes стоит применять для оптимизации загрузки крупных Angular-приложений, когда нужно уменьшить стартовый бандл и ускорить первую отрисовку за счёт отложенной подгрузки редко используемых разделов.