Поиск по сайту:

Как использовать ленивые маршруты загрузки в Angular


Введение

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

По умолчанию Angular использует нетерпеливую загрузку для загрузки модулей. Это означает, что все модули должны быть загружены до запуска приложения. Хотя этого может быть достаточно для многих случаев использования, могут быть ситуации, когда это время загрузки начинает влиять на производительность.

Примечание. Ниже описаны модули отложенной загрузки в приложениях Angular 8+.

В этой статье вы будете использовать отложенные маршруты загрузки в приложении Angular.

Предпосылки

Для выполнения этого урока вам понадобятся:

  • Node.js установлен локально, что можно сделать, следуя инструкциям по установке Node.js и созданию локальной среды разработки.
  • Некоторое знакомство с настройкой проекта Angular.

Это руководство было проверено с помощью Node v16.4.0, npm v7.19.0, @angular/core v12.1.0 и @angular/router v12. .1.0.

Шаг 1 – Настройка проекта

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

Во-первых, давайте используем Angular CLI для создания нового проекта с Angular Router:

  1. ng new angular-lazy-loading-example --routing --style=css --skip-tests

Затем перейдите в новый каталог проекта:

cd angular-lazy-loading-example

Давайте создадим новый функциональный модуль:

  1. ng generate module shop --route shop --module app.module

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

Первым будет компонент cart:

  1. ng generate component shop/cart

Второй будет компонентом checkout:

ng generate component shop/checkout

Третьим будет компонент confirm:

ng generate component shop/confirm

Все три компонента будут расположены в каталоге shop.

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

На этом этапе у вас должен быть новый проект Angular с модулем shop и тремя компонентами.

Шаг 2 – Использование loadChildren

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

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

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

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

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

Шаг 3 – Настройка конфигурации маршрута в функциональном модуле

Теперь все, что осталось сделать, это настроить маршруты, специфичные для функционального модуля.

Вот пример:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

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

const routes: Routes = [
  { path: '', component: CartComponent },
  { path: 'checkout', component: CheckoutComponent },
  { path: 'confirm', component: ConfirmComponent },
];

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

И, наконец, в самом функциональном модуле вы включите свои маршруты с методом RouterModule forChild вместо forRoot:

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

import { ShopRoutingModule } from './shop-routing.module';
import { ShopComponent } from './shop.component';
import { CartComponent } from './cart/cart.component';
import { CheckoutComponent } from './checkout/checkout.component';
import { ConfirmComponent } from './confirm/confirm.component';

@NgModule({
  declarations: [
    ShopComponent,
    CartComponent,
    CheckoutComponent,
    ConfirmComponent,
  ],
  imports: [
    CommonModule,
    ShopRoutingModule
  ]
})
export class ShopModule { }

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

В терминале запустите сервер:

  1. ng serve

Это создаст файл main.js и файл src_app_shop_shop_module_ts.js:

Output
Initial Chunk Files | Names | Size vendor.js | vendor | 2.38 MB polyfills.js | polyfills | 128.58 kB main.js | main | 57.18 kB runtime.js | runtime | 12.55 kB styles.css | styles | 119 bytes | Initial Total | 2.58 MB Lazy Chunk Files | Names | Size src_app_shop_shop_module_ts.js | - | 10.62 kB

Затем откройте в браузере localhost:4200.

Убедитесь, что отложенная загрузка работает, открыв DevTools браузера и просмотрев вкладку «Сеть». Когда приложение первоначально загружается в корень приложения, вы не должны наблюдать ленивые файлы фрагментов. Когда вы переходите по маршруту, такому как /shop, вы должны соблюдать src_app_shop_shop_module_ts.js.

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

Теперь ваше приложение поддерживает ленивую загрузку.

Заключение

В этой статье вы использовали отложенные маршруты загрузки в приложении Angular.

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

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