Ленивая загрузка ресурсов

Ленивая загрузка (lazy loading) в Angular позволяет уменьшить время первоначальной загрузки приложения, загружая модули и ресурсы только при необходимости. Это особенно важно для крупных приложений с множеством маршрутов и компонентов.

Основные принципы

  • Каждый модуль загружается по маршруту только при его активации.
  • Основной бандл содержит минимальный набор кода, обеспечивающий старт приложения.
  • Используется синтаксис динамического импорта import() для разделения кода.

Настройка ленивой загрузки

Создается отдельный модуль, например AdminModule:

@NgModule({
  declarations: [AdminComponent],
  imports: [CommonModule, RouterModule.forChild([
    { path: '', component: AdminComponent }
  ])]
})
export class AdminModule {}

Маршрут для ленивой загрузки указывается в основном маршрутизаторе:

const routes: Routes = [
  { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

При переходе на /admin Angular динамически загрузит AdminModule, не включая его в основной бандл.

Преимущества ленивой загрузки

  • Снижение времени первой загрузки приложения.
  • Экономия трафика за счет загрузки только необходимых модулей.
  • Упрощение поддержки больших приложений, так как каждый модуль изолирован.

Дополнительные возможности

  • Предзагрузка модулей (Preloading): Angular позволяет заранее загружать ленивые модули после старта приложения, чтобы последующий переход был мгновенным.

    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })

  • Lazy loading с компонентами: можно загружать отдельные компоненты динамически с помощью loadComponent. Это особенно полезно для диалогов, всплывающих окон и виджетов.

Ленивая загрузка в Angular тесно связана с модульной архитектурой и современными подходами к оптимизации SPA, позволяя достигать высокой производительности даже при сложных и ресурсоёмких приложениях.

Оглавление