Реализуйте всплывающие окна с отложенной загрузкой с помощью @defer и PrimeNG

Оптимизация загрузки — одна из важнейших тем в области Front-End, и это неудивительно: приложения должны быть быстрыми, чтобы обеспечить отличный пользовательский опыт. Один из эффективных способов ускорить время загрузки — уменьшить размер приложения, и ленивая загрузка — ключевой метод для достижения этого. Большинство разработчиков знакомы с тем, как работает ленивая загрузка: она обычно используется во всех современных фреймворках Front-End для разделения приложений по маршрутам и загрузки компонентов только при необходимости. Другим широко используемым методом является динамический импорт. Однако эти методы могут быть сложными для реализации в определенных сценариях. В этой статье я рассмотрю эти сценарии и расскажу, как их решать в Angular 17.

В моем текущем приложении есть значительное количество скрытого контента, такого как подсказки и всплывающие окна. Хотя это не проблема, когда контент представляет собой просто текст, это становится проблемой производительности, когда он включает в себя сложные бизнес-функции, распределенные по всему приложению. Например, одна из подсказок имеет размер 320 КБ и заполнена тяжелыми компонентами и службами, все из которых требуются бизнесу. Кроме того, эти компоненты инициализируются несколько раз в таблицах данных — до 100 раз на таблицу. Ирония в том, что эти компоненты часто невидимы, пока пользователь не наведет курсор на подсказку, но они все равно замедляют приложение. В большинстве случаев нам нужно отображать только текст, а не скрытый контент. До Angular 17 не было удобного способа справиться с этим, но теперь у нас есть мощный новый инструмент:@deferДавайте посмотрим на код ниже:

<!-- info-popup.html -->
<span
    [pTooltip]="tooltipContent">
    <ng-content></ng-content>
</span>

<ng-template #tooltipContent>
    @defer {
      <some-heavy-component></some-heavy-component>
    }
</ng-template>

<!-- usage example -->
<info-popup>
  <span>I'm a label for the heavy tooltip</span>
</info-popup>

В моем текущем проекте я использую библиотеку PrimeNG, которая служит основным фреймворком пользовательского интерфейса. PrimeNG — это отличный пакет с исчерпывающей документацией, что делает его надежным выбором для создания приложений. В этом решении я использую[pTooltip]директива для создания подсказок и передачи ссылок на шаблоны. Кроме того, я передаю содержимое извне, которое затем отображается как метка для подсказки. В шаблоне я использую@deferдиректива, которая позволяет ленивую загрузку компонентов. В частности,<some-heavy-component>загружается только тогда, когда пользователь наводит курсор наspanэлемент. Эта техника значительно уменьшает начальный размер загрузки и повышает общую производительность за счет минимизации времени загрузки. Откладывая загрузку тяжелых компонентов до тех пор, пока они действительно не понадобятся, мы можем добиться гораздо более эффективного и отзывчивого приложения.

Я пока не могу поделиться результатами, так как мы все еще находимся на этапе внедрения (у нас есть такие огромные сценарии, и потребуется некоторое время, чтобы полностью перейти на новый подход). На данный момент мы не проводили тесты производительности, но важно помнить, что у каждого проекта есть свой уникальный стек и характеристики производительности. То, что хорошо работает для нас, может дать другие результаты в вашем конкретном контексте.

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