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

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

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

Вот другие статьи из этой серии:

Включение

Стратегия «подписки» похожа на буфет. Вы выбираете то, что хотите предварительно загрузить, а остальное оставляете загружать по мере необходимости.

Создание пользовательских стратегий предварительной загрузки - отличный способ контролировать способ предварительной загрузки пакетов. Настраиваемая стратегия предварительной загрузки OptInPreloadStrategy позволяет указать, какие пакеты с отложенной загрузкой должны быть предварительно загружены.

Вы можете сделать это, создав новый класс, реализующий этот PreloadingStrategy интерфейс, и разместив его в корне. Затем вы должны реализовать функцию preload и вернуть функцию load(), если вы хотите указать Angular предварительно загрузить функцию.

Обратите внимание, что функция preload в классе OptInPreloadStrategy проверяет определение маршрута на наличие свойства data, которое содержит свойство preload. Если это свойство data.preload существует и является истинным значением, функция load() будет возвращена. Когда функция load() возвращается, маршрутизатор слушает этот Observable и выполняет сетевой вызов для загрузки пакета маршрута.

import { Injectable } from '@angular/core';
import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, EMPTY } from 'rxjs';
@Injectable({ providedIn: 'root' })
export class OptInPreloadStrategy implements PreloadingStrategy {
  preload(route: Route, load: () => Observable<any>): Observable<any> {
    return route.data && route.data['preload'] ? load() : EMPTY;
  }
}

Определения маршрутов

Эта стратегия требует, чтобы вы указали, какие маршруты должны быть предварительно загружены. Вы можете сделать это, добавив свойство data.preload и установив для него значение true в определении вашего маршрута, как показано ниже.

export const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'heroes' },
  {
    path: 'dashboard',
    loadChildren: () =>
      import('app/dashboard/dashboard.module').then(m => m.DashboardModule),
    data: { preload: true }
  },
  {
    path: 'heroes',
    loadChildren: () =>
      import('app/heroes/heroes.module').then(m => m.HeroesModule),
    data: { preload: true }
  },
  {
    path: 'villains',
    loadChildren: () =>
      import('app/villains/villains.module').then(m => m.VillainsModule)
  },
  { path: '**', pathMatch: 'full', component: PageNotFoundComponent }
];

Обратите внимание, что и для панели управления, и для маршрутов героев свойство preload.data имеет значение true. Однако для маршрута злодеев это свойство не установлено. В этом сценарии герои и панель управления будут предварительно загружены, но злодеи загрузятся только тогда, когда пользователь перейдет на этот маршрут.

Настройка пользовательской стратегии OptInPreloadStrategy

Затем при настройке RouterModule передайте параметры маршрутизатора, включая preloadingStrategy, функции forRoot().

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: OptInPreloadStrategy })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Попытайся

После применения этой стратегии и настройки некоторых маршрутов определения маршрута data.preload = true перестройте и запустите приложение с ng serve. Откройте браузер, откройте инструменты разработчика и перейдите на http://localhost:4200. Когда вы проверите вкладку «Сеть» в своем браузере, вы увидите, что все ваши пакеты уже загружены.

Обратите внимание, что панель управления и герои уже предварительно загружены, а злодеи - нет. Если вы действительно хотите увидеть разницу, включите в инструментах разработчика регулирование более медленного соединения, такого как 3G, а затем обновите страницу. Предварительная загрузка теперь будет более заметной на вкладке «Сеть».

Выбор подходящего варианта для вашего приложения

Теперь, когда вы знаете, как создать свою собственную стратегию предварительной загрузки, такую ​​как OptInPreloadStrategy, как вы оцениваете, является ли эта стратегия правильной для вашего приложения?

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

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

Ресурсы

Первоначально опубликовано на сайте johnpapa.net 29 мая 2019 г.