Производительность приложения - один из самых важных параметров, который необходимо учитывать. Пренебрежение этим аспектом часто приводит к ухудшению пользовательского опыта.
До Angular 9 мы много слышали о отложенной загрузке модулей для повышения производительности приложения. Но с Angular 9 у нас есть потрясающая функция для отложенной загрузки компонентов. Все это благодаря движку Ivy, который сделал это возможным и довольно простым. Если вы не уверены, что это такое, посмотрите наш пост, где мы проиллюстрируем, что делает его таким удобным для разработчиков:
В конце этого блога мы хорошо поймем, как можно использовать отложенную загрузку компонентов в нашем приложении, чтобы повысить его производительность.
Что такое отложенная загрузка компонентов в Angular и для чего она нужна?
Это просто означает, что компонент будет загружен и добавлен в DOM только в то время, когда он требуется для рендеринга.
Когда мы лениво загружаем какой-либо компонент, он не включается в исходный пакет, что уменьшает его размер. Чем меньше размер пакета, тем быстрее выполняется рендеринг приложения.
Как отложить загрузку компонентов в Angular?
Компоненты могут быть загружены лениво в 2 сценариях:
›› Сценарий 1. Добавив компонент в конец модели DOM.
›› Сценарий 2: добавив компонент где-нибудь между элементами модели DOM.
Давайте разберемся в реализации каждого из них на примере вложенной ленивой загрузки компонентов, в которой при нажатии кнопки базовый компонент загружает ленивый компонент, который позже загрузит другой ленивый компонент.
Предварительные требования
- npm
- Угловой 9+
- Машинопись версии 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. В свободное время танцы - одно из ее любимых занятий. Она также любит искусство, любит заниматься творчеством, например рисовать и декорировать.
Ссылка: