Стратегии предварительной загрузки маршрутов в 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 в фоновом режиме, когда вы открыли приложение:

Стратегия PreloadAllModules в действии.

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

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

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

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

Вы можете добавить быструю ссылку в приложение 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 , поскольку кнопка в центре страницы имеет ссылку на маршрутизатор. А когда вы откроете боковую навигацию, вы заметите, что маршрутизатор предварительно загружает маршрут «О программе»:

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

Использование стратегии предварительной загрузки 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 теперь будут доступны в ваших лениво загружаемых модулях.

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

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

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

Заключение

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

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