Стратегии предварительной загрузки маршрутов в Angular

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

Minko Gechev

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

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

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

Стратегии предварительной загрузки маршрутов в Angular

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

• PreloadAllModules , который предварительно загружает все маршруты с отложенной загрузкой, как следует из названия
• QuicklinkStrategy , который предварительно загружает только маршруты, связанные со ссылками на текущей странице.

Остальная часть этого поста относится к примеру приложения Angular. Исходный код можно найти на GitHub .

Использование стратегии PreloadAllModules

В примере приложения есть несколько маршрутов с отложенной загрузкой. Чтобы предварительно загрузить их все с помощью стратегии PreloadAllModules , встроенной в Angular, укажите ее в качестве значения для свойства preloadingStrategy в конфигурации маршрутизатора:

import { RouterModule, PreloadAllModules } from '@angular/router';
// …

RouterModule.forRoot([
  …
], {
  preloadingStrategy: PreloadAllModules
})
// …

Теперь запустите приложение и посмотрите на панель «Сеть» в Chrome DevTools:

1. Нажмите `Control+Shift+J` (или `Command+Option+J` на Mac), чтобы открыть DevTools.
2. Перейдите на вкладку «Сеть» .

Вы должны увидеть, что маршрутизатор загрузил nyan-nyan-module.js и about-about-module.js в фоновом режиме, когда вы открыли приложение:

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

Использование стратегии предварительной загрузки Quicklink

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

Библиотека quicklink обеспечивает лучшую стратегию для больших приложений. Она использует API IntersectionObserver для предварительной загрузки только модулей, связанных со ссылками, которые в данный момент видны на странице.

Вы можете добавить quicklink в приложение Angular, используя пакет ngx-quicklink . Начните с установки пакета из npm:

npm install --save ngx-quicklink

Как только QuicklinkStrategy станет доступен в вашем проекте, вы сможете использовать его, указав preloadingStrategy маршрутизатора и импортировав QuicklinkModule :

import {QuicklinkStrategy, QuicklinkModule} from 'ngx-quicklink';
…

@NgModule({
  …
  imports: [
    …
    QuicklinkModule,
    RouterModule.forRoot([…], {
      preloadingStrategy: QuicklinkStrategy
    })
  ],
  …
})
export class AppModule {}

Теперь, когда вы снова откроете приложение, вы заметите, что маршрутизатор предварительно загружает только nyan-nyan-module.js поскольку кнопка в центре страницы имеет ссылку на маршрутизатор. А когда вы откроете боковую навигацию, вы заметите, что маршрутизатор затем предварительно загружает маршрут "About":

Использование стратегии предварительной загрузки Quicklink для нескольких модулей с отложенной загрузкой

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

Сначала импортируйте QuicklinkModule из ngx-quicklink в ваш общий модуль и экспортируйте его:

import { QuicklinkModule } from 'ngx-quicklink';
…

@NgModule({
  …
  imports: [
    QuicklinkModule
  ],
  exports: [
    QuicklinkModule
  ],
  …
})
export class SharedModule {}

Затем импортируйте SharedModule во все ваши модули с отложенной загрузкой:

import { SharedModule } from '@app/shared/shared.module';
…

@NgModule({
  …
  imports: [
      SharedModule
  ],
  …
});

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

Выход за рамки базовой предварительной загрузки

Хотя выборочная предварительная загрузка через quicklink может значительно ускорить навигацию, вы можете сделать свою стратегию предварительной загрузки еще более эффективной с точки зрения сети, используя предикативную предварительную загрузку, которая реализована в Guess.js . Анализируя отчет из Google Analytics или другого поставщика аналитики, Guess.js может предсказать навигационный путь пользователя и предварительно загрузить только те фрагменты JavaScript, которые, скорее всего, понадобятся далее.

Узнать, как использовать Guess.js с Angular, можно на этой странице сайта Guess.js .

Заключение

Для ускорения навигации при использовании разделения кода на уровне маршрута:

1. Выберите правильную стратегию предварительной загрузки в зависимости от размера вашего приложения:
   • Приложения с небольшим количеством модулей могут использовать встроенную в Angular стратегию PreloadAllModules .
   • Приложения со множеством модулей должны использовать специальную стратегию предварительной загрузки, например quicklink в Angular, или предикативную предварительную загрузку, реализованную в Guess.js.
2. Настройте стратегию предварительной загрузки, установив свойство preloadStrategy маршрутизатора Angular.