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

До Angular 9 мы много слышали о отложенной загрузке модулей для повышения производительности приложения. Но с Angular 9 у нас есть потрясающая функция для отложенной загрузки компонентов. Все это благодаря движку Ivy, который сделал это возможным и довольно простым. Если вы не уверены, что это такое, посмотрите наш пост, где мы проиллюстрируем, что делает его таким удобным для разработчиков:



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

Что такое отложенная загрузка компонентов в Angular и для чего она нужна?

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

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

Как отложить загрузку компонентов в Angular?

Компоненты могут быть загружены лениво в 2 сценариях:

›› Сценарий 1. Добавив компонент в конец модели DOM.

›› Сценарий 2: добавив компонент где-нибудь между элементами модели DOM.

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

Предварительные требования

  1. npm
  2. Угловой 9+
  3. Машинопись версии 3.6+

Прежде чем двигаться дальше, убедитесь, что для параметра enableIvy установлено значение true. Чтобы проверить это, откройте tsconfig.json и найдите / добавьте следующие строки:

“angularCompilerOptions”: {
“enableIvy”: true
}

Готово? Приступим к реализации!

Реализация отложенной загрузки компонентов в Angular

Шаг №1. Используйте команду ниже, чтобы создать новое приложение Angular.

ng new lazy-load-demo

Шаг № 2. Создайте два новых компонента, которые нужно загружать лениво.

ng g c lazy-Comp1 — skip-import — skip-selector
ng g c lazy-Comp2 — skip-import — skip-selector
  • skip-import: он используется, поскольку мы не хотим импортировать эти компоненты в модуль.
  • skip-selector: пропустить селектор, поскольку он не требуется.

Шаг № 3. Теперь добавьте следующий код в

app.component.html:

<h1 style=”text-align: center”>LAZY LOADING OF COMPONENTS</h1>
<div style=”text-align: center;margin-top: 20px;”>
<button (click)=”firstLazyComp()” style=”margin-right: 5px;
background-color: steelblue;font-size: 23px;”>
<b>Click to load a Lazy comp!! </b>
</button>
</div>

app.component.ts:

import { Component, ViewContainerRef, ComponentFactoryResolver } from ‘@angular/core’;
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.scss’]
})
export class AppComponent {
title = ‘lazy-load-demo’;
constructor(
private viewContainerRef: ViewContainerRef,
private cfr: ComponentFactoryResolver
) { }
async firstLazyComp() {
this.viewContainerRef.clear();
const { LazyComp1Component } = await import(‘./lazy-comp1/lazy-comp1.component’);
this.viewContainerRef
.createComponent(this.cfr.resolveComponentFactory(LazyComp1Component));
}
}

В app.component.html, у нас есть кнопка, которая при нажатии вызывает функцию firstLazyComp (),, которая лениво загружает LazyComp1Component, добавив его в конец DOM (на основе сценария 1).

В конструктор нужно добавить следующее:

  • ViewContainerRef - контейнер, который помогает в предоставлении места в DOM для добавления динамически создаваемого компонента.
  • ComponentFactoryResolver - используется для отображения динамически созданного экземпляра компонента.

В методе firstLazyComp () мы сначала очищаем viewContainerRef, чтобы он не содержал никаких других ссылок. Затем мы динамически импортируем компонент и визуализируем его с помощью createComponent () и resolveComponentFactory ().

Таким образом, LazyComp1Component будет загружаться лениво. Чтобы убедиться, мы можем проверить вкладку сеть:

После нажатия кнопки «Нажмите, чтобы загрузить ленивую композицию !!» загружается файл lazy-comp1-component.js, а также оказано.

Шаг № 4: У нас также есть кнопка в этом компоненте с отложенной загрузкой (т. е. LazyComp1), которая будет выполнять отложенную загрузку другого компонента, LazyComp2. Но на этот раз компонент будет добавлен не в конец DOM, а между существующими элементами DOM (на основе сценария 2).

Добавьте следующий код в:

lazy-comp1.component.html:

<div style=”text-align: center; background-color: aliceblue;height: 300px”>
<h4>SCENARIO 1 :
<h2>Look I’m appended at the end of the DOM…</h2>
</h4>
<div style=”background-color:lightblue;margin: 1% 28%;”>
<ng-template #loadLazyComponent></ng-template>
</div>
<button (click)=”secondLazyComp()” style=”margin-left: 5px;
background-color: steelblue;font-size: 23px;”>
<b>Try Me!! I’m also Lazy</b>
</button>
</div>

lazy-comp1.component.ts:

import { Component, OnInit, ViewContainerRef, ViewChild, ComponentFactoryResolver } from ‘@angular/core’;
@Component({
templateUrl: ‘./lazy-comp1.component.html’,
styleUrls: [‘./lazy-comp1.component.scss’]
})
export class LazyComp1Component implements OnInit {
component;
@ViewChild(‘loadLazyComponent’, { read: ViewContainerRef, static: true }) private loadLazyComponent: ViewContainerRef;
constructor(private readonly componentFactoryResolver: ComponentFactoryResolver, ) { }
ngOnInit() {
}
secondLazyComp() {
if (!this.component) {
import(‘../lazy-comp2/lazy-comp2.component’).then(({ LazyComp2Component }) => {
this.component = this.componentFactoryResolver.resolveComponentFactory(LazyComp2Component);
this.loadLazyComponent.createComponent(this.component);
})
}
}
}

Поскольку мы хотим отобразить компонент между существующими элементами DOM, мы используем ng-template. Когда мы нажимаем на кнопку, она вызывает функцию secondLazyComp (). На этот раз мы будем использовать ссылочную переменную шаблона для рендеринга компонента с отложенной загрузкой, lazy-comp2.

Найдите указанный ниже компонент, который будет вставлен в ng-template lazy-comp1.component.html.

lazy-comp2.component.html:

<div style=”height: 162px;”>
     <h4 style=”text-align: center;padding: 13%”>
         SCENARIO 2 : Appended dynamically in between the existing DOM
     </h4>
</div>

Итак, давайте еще раз взглянем на вкладку сети. Мы видим, что файл lazy-comp2-component.js загружается только тогда, когда требуется его визуализация.

Вот и все! В нашем проекте успешно реализована вложенная отложенная загрузка компонентов.



Angular является товарным знаком Google LLC. npm является зарегистрированным товарным знаком npm, Inc. DLT Labs является товарным знаком DLT Global, Inc.

Автор - Чарул Бишной, DLT Labs ™

Об авторе - Чарул - помощник менеджера-программиста в DLT Labs и в настоящее время связан с командой DL Tools. Она владеет Angular, Android, Node.js и Java. В свободное время танцы - одно из ее любимых занятий. Она также любит искусство, любит заниматься творчеством, например рисовать и декорировать.

Ссылка:

Https://angular.io/docs