Если вы создаёте большое Angular-приложение, вам наверняка важно, чтобы оно загружалось быстро. Представьте, что вы устраиваете вечеринку и хотите подавать закуски не сразу, а по мере прихода гостей, чтобы не перегрузить кухню. «Ленивая» загрузка в Angular работает примерно так же: вместо того чтобы загружать всё приложение целиком сразу, вы подгружаете только те части, которые нужны — и только когда они нужны.

В этом пошаговом руководстве мы разберём, как реализовать lazy loading в Angular.

Что такое Lazy Loading?

Lazy loading (или «ленивая загрузка») в Angular позволяет подгружать JavaScript-бандлы асинхронно — по мере перехода пользователя между маршрутами. Это как если бы Angular говорил: «Не будем выкладывать всю еду сразу. Достанем только то, что просят».

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

  • Быстрая начальная загрузка
  • Лучшая пользовательская реакция
  • Эффективное использование ресурсов

Шаг 1: Создание Angular-проекта

Если проекта ещё нет, создайте его:

ng new lazy-loading-demo

Выберите «Yes» для Angular Routing и формат стилей — CSS (или любой другой на ваш выбор).

Затем перейдите в директорию проекта:

cd lazy-loading-demo

Шаг 2: Создание feature-модулей

Ленивая загрузка обычно предполагает, что приложение разделено на модули, которые загружаются по требованию. Создадим два модуля: products и cart.

ng generate module features/products --route products --module app.module
ng generate module features/cart --route cart --module app.module

Эти команды создадут два модуля (ProductsModule и CartModule) с маршрутизацией. В app-routing.module.ts Angular автоматически настроит ленивую загрузку:

const routes: Routes = [
  { path: 'products', loadChildren: () => import('./features/products/products.module').then(m => m.ProductsModule) },
  { path: 'cart', loadChildren: () => import('./features/cart/cart.module').then(m => m.CartModule) },
];

Здесь Angular не импортирует модули сразу — они будут загружены только при переходе на /products или /cart. 🎉

Шаг 3: Создание компонентов в модулях

Создаём компоненты внутри модулей:

ng generate component features/products/product-list
ng generate component features/cart/cart-details

Добавим что-нибудь в шаблоны, чтобы увидеть результат.

product-list.component.html:

<h2>Products List</h2>
<p>Here are some awesome products you can buy!</p>

cart-details.component.html:

<h2>Your Cart</h2>
<p>This is your shopping cart. Ready to check out?</p>

Шаг 4: Настройка маршрутов внутри модулей

Откройте products-routing.module.ts и настройте маршрут:

const routes: Routes = [
  { path: '', component: ProductListComponent }
];

Аналогично — в cart-routing.module.ts:

const routes: Routes = [
  { path: '', component: CartDetailsComponent }
];

Шаг 5: Проверка «ленивой» загрузки

Запускаем приложение:

ng serve

Перейдите в браузере на http://localhost:4200/products. Angular загрузит ProductsModule только при переходе на этот маршрут.

Затем перейдите на /cart — подгрузится CartModule. В DevTools (вкладка Network) вы увидите, что Angular загружает отдельные JavaScript-файлы для этих маршрутов. «Ленивая» загрузка работает!

Шаг 6: Предзагрузка лениво загружаемых модулей (не обязательно)

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

В app-routing.module.ts настройте RouterModule так:

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

Теперь Angular будет загружать ленивые модули в фоне после основного рендера, чтобы они были готовы к моменту перехода.

Вот и всё! Теперь вы знаете, как настроить ленивую загрузку модулей в Angular.