Как настроить ленивую загрузку в Angular

Development, Java | Amber | Комментировать запись

В Angular есть понятие ленивой (или отложенной) загрузки модулей. С ее помощью можно загружать функции только тогда, когда пользователь впервые переходит к тому или иному маршруту. Это может существенно повысить производительность вашего приложения и уменьшить начальный размер пакета. Кроме того, ленивую загрузку довольно просто настроить.

В этом руководстве мы на примерах покажем, как использовать отложенную загрузку модулей в приложениях Angular 8+.

Функциональные модули

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

Читайте также: Сборка прогрессивных приложений в Angular

Предположим, что у вас уже есть проект Angular CLI. Давайте создадим новый функциональный модуль shop:

$ ng g module shop

Теперь мы создадим внутри функционального модуля shop 3 компонента:

$ ng g c shop/cart

$ ng g c shop/checkout

$ ng g c shop/confirm

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

Настройка основного маршрута и loadChildren

В основной конфигурации маршрутизации нужно использовать что-то вроде следующего:

import { Routes } from '@angular/router';

// BoutiqueComponent is a normal, eager loaded component
import { BoutiqueComponent } from './boutique/boutique.component';

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

Конфигурация маршрута в функциональном модуле

Теперь все, что осталось сделать, – это настроить маршруты внутри функционального модуля. Вот пример с нашим модулем shop/shop.routing.ts:

import { Routes } from '@angular/router';

import { CartComponent } from './cart/cart.component';
import { CheckoutComponent } from './checkout/checkout.component';
import { ConfirmComponent } from './confirm/confirm.component';

А в самом функциональном модуле (в файле shop/shop.module.ts) нужно включить маршруты с помощью метода forChild (из RouterModule), а не forRoot:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { CartComponent } from './cart/cart.component';
import { CheckoutComponent } from './checkout/checkout.component';
import { ConfirmComponent } from './confirm/confirm.component';
import { routes } from './shop.routing';
import { RouterModule } from '@angular/router';

Вот и все! Теперь вы можете использовать директиву routerLink для перехода по маршрутам /shop, /shop/checkout или /shop/confirm, и при первом переходе по одному из этих путей модуль будет загружен.

Примечание: Если ленивая загрузка не сработала сразу, попробуйте перезапустить сервер.

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