Strategie wstępnego wczytywania trasy w Angular

Wstępnie wczytuj trasy z wyprzedzeniem, aby przyspieszyć nawigacji.

Minko Gechev

Dzielenie kodu na poziomie trasy pomaga skrócić czas wczytywania początkowego aplikacji, opóźniając kod JavaScript powiązany z trasami, które nie są początkowo potrzebne. Dzięki temu router Angular czeka, aż użytkownik przejdzie na daną trasę, zanim wyśle żądanie sieciowe, żeby pobrać powiązany kod JavaScript.

Ta technika sprawdza się przy początkowym wczytywaniu strony, ale może spowolnić nawigację, opóźnieniach i przepustowości sieci. Jednym ze sposobów rozwiązania tego problemu jest wstępne wczytywanie tras. Dzięki wstępnemu ładowaniu, gdy użytkownik jest na określonej trasie, możesz pobrać JavaScript powiązany z trasami, które prawdopodobnie będą potrzebne w następnej kolejności. Tę funkcję zapewnia router Angular.

Z tego posta dowiesz się, jak przyspieszyć nawigację przy podziale kodu na poziomie trasy dzięki wykorzystaniu wstępnego wczytywania JavaScriptu w Angular.

Wyznacz strategie wstępnego wczytywania w Angular

Router Angular udostępnia właściwość konfiguracji o nazwie preloadingStrategy, która określa logikę wstępnego wczytywania i przetwarzania leniwie ładowanych modułów Angular. Omówimy 2 możliwe strategie:

  • PreloadAllModules, który wstępnie wczytuje wszystkie trasy wczytywane metodą leniwego ładowania, jak sugeruje nazwa.
  • QuicklinkStrategy, na którym wstępnie wczytywane są tylko trasy powiązane z linkami występujące na bieżącej stronie.

Pozostała część tego posta dotyczy przykładowej aplikacji Angular. Kod źródłowy znajdziesz na GitHubie.

Korzystam ze strategii PreloadAllModules

Przykładowa aplikacja ma kilka tras wczytywanych metodą leniwego ładowania. Aby wstępnie wczytać wszystkie z nich za pomocą wbudowanej w Angular strategii PreloadAllModules, określ ją jako wartość właściwości preloadingStrategy w konfiguracji routera:

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

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

Teraz uruchom aplikację i zajrzyj do panelu Network (Sieć) w Narzędziach deweloperskich w Chrome:

  1. Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
  2. Kliknij kartę Sieć.

Widać, że router powinien pobrać w tle nyan-nyan-module.js i about-about-module.js po otwarciu aplikacji:

Strategia PreloadAllModules w akcji.

Router zarejestrował też moduł więc gdy przejdziesz do adresu URL powiązanego z dowolnym ze wstępnie wczytanych modułów, przejście jest natychmiastowe.

PreloadAllModules jest przydatny w wielu przypadkach. Jeśli jednak masz dziesiątki modułów, agresywne wstępne wczytywanie może znacznie zwiększyć wykorzystanie sieci. Poza tym router musi rejestrować trasy we wszystkich wstępnie załadowanych modułach, co może powodować intensywne obliczenia w wątku interfejsu i spowalniać działanie usługi.

Biblioteka quicklink zapewnia lepszą strategię w przypadku większych aplikacji. Wykorzystuje interfejs IntersectionObserver API do wstępnego wczytywania tylko modułów powiązanych z linkami, które są aktualnie widoczne na stronie.

Szybki link możesz dodać do aplikacji Angular, używając pakietu ngx-quicklink. Zacznij od zainstalowania pakietu z npm:

npm install --save ngx-quicklink

Gdy stanie się dostępne w projekcie, możesz użyć funkcji QuicklinkStrategy, określając router preloadingStrategy i importując QuicklinkModule:

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

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

Gdy ponownie otworzysz aplikację, zauważysz, że router wstępnie wczytuje tylko informację nyan-nyan-module.js, ponieważ przycisk na środku strony zawiera link do routera. Po otwarciu bocznego panelu nawigacyjnego zauważysz, że router wstępnie wczytuje panel informacyjny „Informacje”. trasa:

Prezentacja strategii wstępnego wczytywania szybkich linków.

Powyższy przykład sprawdzi się w przypadku podstawowej aplikacji, ale jeśli zawiera wiele modułów wczytywanych metodą leniwego ładowania, należy zaimportować plik QuicklinkModule do modułu udostępnionego, a następnie wyeksportować go do modułów udostępnianych metodą leniwego ładowania.

Najpierw zaimportuj QuicklinkModule z tabeli ngx-quicklink do udostępnionego modułu i wyeksportuj go:

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

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

Następnie zaimportuj plik SharedModule do wszystkich modułów wczytywanych metodą leniwego ładowania:

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

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

Moduł Quicklinks będzie teraz dostępny w modułach ładowanych metodą leniwego ładowania.

Wykraczanie poza podstawowe wstępne wczytywanie

Selektywne wstępne wczytywanie za pomocą szybkich linków może znacznie przyspieszyć nawigację, ale możesz jeszcze bardziej zwiększyć efektywność tej strategii w sieci dzięki zastosowaniu predykcyjnego wczytywania, które jest implementowane przez Guess.js. Dzięki analizie raportu pochodzącego z Google Analytics lub innego dostawcy usług analitycznych Guess.js może przewidzieć drogę użytkownika w witrynie i wstępnie wczytać tylko te fragmenty, które mogą być potrzebne w następnej kolejności.

Aby dowiedzieć się, jak używać Guess.js z Angular, przeczytaj tę stronę w witrynie Guess.js.

Podsumowanie

Aby przyspieszyć nawigację podczas korzystania z podziału kodu na poziomie trasy:

  1. Wybierz odpowiednią strategię wstępnego wczytywania w zależności od rozmiaru aplikacji:
    • Aplikacje z niewielką liczbą modułów mogą korzystać ze strategii PreloadAllModules wbudowanej w Angular.
    • Aplikacje z wieloma modułami powinny korzystać z niestandardowej strategii wstępnego wczytywania, takiej jak szybkie linki Angular czy wstępne wczytywanie, które zaimplementowano w Guess.js.
  2. Aby skonfigurować strategię wstępnego wczytywania, ustaw właściwość preloadStrategy routera Angular.