Кто они такие? И как они используются?

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

Вот полное руководство, которое научит вас всему, что вам нужно знать о стратегиях предварительной загрузки Angular.

В Angular есть такая крутая функция, которая называется модуль Angular.

Но что это?

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

И почему они крутые?

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

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

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

Именно здесь стратегии предварительной загрузки могут сделать ваше приложение Angular сияющим.

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

Вы хотите сразу их загрузить?

Или когда они нужны пользователю?

Или как насчет ожидания, пока пользователь не наведет курсор на модуль с отложенной загрузкой, который еще не был загружен?

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

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

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

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

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

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

Итак, какие еще варианты у нас есть?

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

Существуют и другие стратегии предварительной загрузки, разработанные сообществом, которые вы можете использовать.

Этот пакет представляет собой PreloadingStrategy, который предварительно загружает лениво загружаемый маршрут, когда пользователь наводит указатель мыши на соответствующую ссылку маршрутизатора. Его построил Минько Гечев.

И что-да-я-знаешь? Он является частью команды Angular.

Чтобы установить пакет ngx-hover-preload, выполните эту команду.

yarn add ngx-hover-preload

Или, если вы используете npm.

npm install --save ngx-hover-preload

Импортируйте HoverPreloadModule в свой AppModule и ваши модули с отложенной загрузкой, чтобы убедиться, что требуемые директивы доступны:

import { HoverPreloadModule } from 'ngx-hover-preload'; 
@NgModule({ 
   declarations: [ // ... ], 
   imports: [ // ... HoverPreloadModule ], 
   bootstrap: [AppComponent] 
}) export class AppModule { }

Затем вы импортируете HoverPreloadModule во все модули с отложенной загрузкой.

И, наконец, установите HoverPreloadStrategy в качестве preloadStrategy:

import { HoverPreloadStrategy } from 'ngx-hover-preload'; 
@NgModule({ 
   // ... 
   imports: [RouterModule.forRoot(routes, { preloadingStrategy: HoverPreloadStrategy })], 
}) export class AppModule {}

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

Это попытка сделать последующую навигацию по страницам намного быстрее. Вот как это работает.

  • Во-первых, он обнаруживает ссылки routerLinks в области просмотра.
  • Во-вторых, ожидает, пока браузер не будет простаивать, а страница полностью загрузится и отобразится.
  • В-третьих, убедитесь, что у пользователя не медленное соединение или включена функция экономии трафика.
  • Наконец, он предварительно загружает модули с отложенной загрузкой, используя стратегию предварительной загрузки Angular.

Вот как установить и использовать его в приложении Angular.

npm install --save ngx-quicklink

После этого импортируйте QuicklinkModule в AppModule и используйте QuicklinkStrategy в качестве preloadingStrategy в конфигурации маршрутизатора. Вот так.

// ... 
import { QuicklinkModule, QuicklinkStrategy } from 'ngx-quicklink'; 
@NgModule({ 
   declarations: [...], 
   imports: [ // ... 
     QuicklinkModule, 
     RouterModule.forRoot(routes, { preloadingStrategy: QuicklinkStrategy }),
    ], 
   bootstrap: [...] }) export class AppModule {}

И, наконец, вы импортируете HoverPreloadModule во все модули с отложенной загрузкой.

Какую стратегию вы должны использовать для своего приложения Angular?

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

Если пользователи являются сотрудниками, использующими коммерческое оптоволоконное соединение, используйте стратегию предварительной загрузки. Джуз, возьми эти файлы и заткни их!

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

Первоначально опубликовано на https://danielk.tech.