Angular - более высокая производительность и лучший пользовательский интерфейс с отложенной загрузкой
Что такое отложенная загрузка?
Ленивая загрузка - это шаблон проектирования, обычно используемый в компьютерном программировании для отсрочки инициализации объекта до момента, когда это необходимо. При правильном и надлежащем использовании он может способствовать повышению эффективности работы программы. (источник: википедия)
Проще говоря для нашего контекста,
не загружайте то, что вам не нужно.
Как отложенная загрузка маршрутов улучшает производительность в приложении Angular?
Крупномасштабное приложение будет содержать множество функциональных модулей, которые не нужно загружать сразу. Функциональные модули могут загружаться асинхронно после загрузки приложения либо по запросу, либо с использованием различных стратегий (будет рассмотрено позже). Уменьшение размера пакета при первоначальной загрузке приложения улучшает время загрузки приложения, тем самым улучшая взаимодействие с пользователем.
Я создал простой клон Gmail, используя случайные данные для этого сообщения в блоге. Я не оптимизировал код каким-либо образом, поэтому я могу увеличить общие размеры пакетов и несколько маршрутов / модулей, чтобы объяснить концепцию.
Это простое приложение, оно имеет один файл маршрутизации app.routing.ts, а все функции разделены на модули. Я использую расширение Augury для отладки приложения Angular, чтобы проверить маршруты наших приложений. Инструкция по установке находится на augury.angular.io.
После установки Augury откройте инструменты разработчика и перейдите на вкладку Augury, затем в Router Tree. Ниже представлено дерево маршрутизаторов для этого приложения.
Вы можете видеть выше, что у нас есть 2 уровня вложенной маршрутизации, и каждый уровень содержит несколько маршрутов. В реальных приложениях у вас может быть больше, чем это, и каждый модуль может содержать несколько компонентов, шаблонов и т. Д. Пользователю не понадобится весь этот код при начальной загрузке.
Реорганизация нашего приложения для отложенной загрузки маршрутов
Я собираюсь сосредоточиться на модуле ленивой загрузки настроек и маршрутах в этом модуле.
Шаг №1
Создать функциональный модуль (модуль настроек) регистрации маршрута. В настоящее время все маршруты регистрируются в app.routing.ts, а затем импортируются в app.module.ts. Ниже представлен наш текущий файл маршрутизации.
Перенести маршрутизацию для settings в собственный модуль gm-settings.module.ts. При регистрации маршрутов с помощью RouterModule нам нужно использовать forChild вместо forRoot, поскольку это дочерняя система маршрутизации для нашего приложения. Итак, gm-settins.module.ts будет выглядеть примерно так, как показано ниже.
Шаг 2
Обновите app.routing.ts, чтобы загружать дочерние маршруты, используя относительный путь к модулю настроек и добавляя имя класса модуля.
Шаг № 3
Модуль настроек в настоящее время импортирован в наш app.module.ts, нам нужно удалить эту ссылку, поскольку Angular будет динамически настраивать регистрацию модуля настроек.
Таким образом, единственная ссылка на модуль настроек - это строка относительного пути, которую мы добавили в app.routing.ts. Давайте посмотрим на наше дерево маршрутизаторов, вы увидите, что Lazy добавлен к модулю настроек.
Если мы посмотрим на вкладку сети, то увидим, что дополнительный файл 5.chunk.js загружается при нажатии на значок настроек, который имеет GmSettingsModule. Регистрация маршрутизации активируется, когда пользователь переходит к заданному маршруту.
Я использовал ту же методологию для маршрута электронной почты. Взглянув на вкладку сети, мы видим, что загружены два блока (настройки и электронная почта), что приводит нас к следующему разделу стратегии предварительной загрузки.
Стратегия предварительной загрузки
Файл модуля (фрагментов) загружается, когда пользователь нажимает на настройки или конкретный адрес электронной почты. Таким образом, по сети это может вызвать задержку для пользователя, что приведет к ухудшению взаимодействия с пользователем.
Для этого сценария Angular предоставляет метод, позволяющий маршрутизатору загружать все модули отложенной загрузки асинхронно сразу после загрузки приложения и не ждать, пока модуль активируется при нажатии пользователем.
На гифке выше мы видим, что все *.chunk.js загружаются сразу после инициализации приложения.
Пользовательская стратегия предварительной загрузки
Вышеупомянутые изменения решают две проблемы:
- Это улучшает время загрузки приложения за счет уменьшения размера начальной загрузки.
- Он предварительно загружает фрагменты, чтобы у пользователя не было задержки при переходе к любому лениво загруженному модулю.
Но это создает другую проблему. Возможно, мы загружаем chunks, к которому пользователь может очень редко переходить. Ключевым моментом в разработке является поиск правильного баланса производительности и пользовательского опыта.
Пример: в нашем приложении у нас есть два модуля с отложенной загрузкой.
- Модуль настроек
- Электронный модуль
Наше приложение является почтовым клиентом, поэтому модуль электронной почты будет использоваться очень часто. Но модуль настроек будет использоваться пользователем, но в очень редких случаях. Есть значение для предварительной загрузки модуля электронной почты, но меньшее значение для предварительной загрузки модуля настроек. (в крупномасштабном приложении может быть много модулей, которые не нужно предварительно загружать)
Angular позволяет расширить PreloadingStrategy, чтобы указать нашу собственную стратегию Custom, чтобы указать, при каких условиях предварительно загружать ленивый загружаемый модуль. Мы создадим провайдера, расширяющего PreloadStrategy на модули предварительной загрузки, которые preload:true указаны в конфигурации маршрута.
CustomPreloadingStrategy должен быть зарегистрирован для провайдеров в модуле, в котором объявлен RouterModule.forRoot. В app.module.ts,
In app.routing.ts,
Взглянув на вкладку сети, мы видим, что 5.chunks.js (модуль электронной почты) предварительно загружен, а 6.chunks.js загружается асинхронно при переходе к (модулю настроек).
Этот пост длиннее обычного. Концепция отложенной загрузки со стратегической реализацией условной предварительной загрузки может улучшить производительность приложения и значительно улучшить взаимодействие с пользователем.
Ссылка на Github Repo. Имеет две ветви
- master: приложение без ленивой загрузки
- lazy-loading: для настроек и электронной почты реализована отложенная загрузка.
Если вам понравился этот пост, поделитесь, прокомментируйте и нажмите 💚.
