Strategie wstępnego wczytywania trasy w Angular

Wstępnie wczytaj trasy z wyprzedzeniem, aby przyspieszyć nawigację.

Minko Gieczew

Dzielenie kodu na poziomie trasy może pomóc skrócić początkowy czas wczytywania aplikacji przez opóźnienie kodu JavaScript powiązanego z trasami, które na początku nie są potrzebne. Dzięki temu router Angular czeka, aż użytkownik wyznaczy trasę, zanim uruchomi żądanie sieciowe, aby pobrać powiązany kod JavaScript.

Ta metoda doskonale nadaje się do wstępnego wczytywania strony, ale może spowalniać nawigację w zależności od opóźnień sieci i przepustowości użytkowników. Jednym ze sposobów rozwiązania tego problemu jest wstępne wczytywanie tras. Gdy użytkownik jest na danej trasie, możesz pobrać i zapisać w pamięci podręcznej kod JavaScript powiązany z trasami, które prawdopodobnie będą potrzebne w następnej kolejności. Router Angular od razu udostępnia tę funkcję.

Z tego posta dowiesz się, jak przyspieszyć nawigację przy użyciu podziału kodu na poziomie trasy dzięki wykorzystaniu wstępnego wczytywania JavaScript w Angular.

Strategie wstępnego wczytywania tras w Angular

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

• PreloadAllModules, który wstępnie wczytuje wszystkie leniwe trasy, jak wskazuje jej nazwa.
• QuicklinkStrategy, który wstępnie wczytuje tylko trasy powiązane z linkami na bieżącej stronie.

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

Za pomocą strategii PreloadAllModules

Przykładowa aplikacja ma kilka tras wczytywanych metodą leniwego ładowania. Aby wstępnie wczytać je wszystkie za pomocą strategii PreloadAllModules wbudowanej w Angular, podaj 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 spójrz na panel 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ć.

Podczas otwierania aplikacji router powinien pobrać w tle nyan-nyan-module.js i about-about-module.js:

Router zarejestrował też deklaracje trasy modułów, więc po otwarciu adresu URL powiązanego z którymkolwiek ze wstępnie załadowanych modułów przejście jest natychmiastowe.

Korzystanie ze strategii wstępnego wczytywania szybkich linków

PreloadAllModules przydaje się w wielu przypadkach. Jeśli jednak są dziesiątki modułów, ich 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 spowodować obszerne obliczenia w wątku UI i powolne działanie użytkownika.

Biblioteka szybkich linków jest lepszą strategią dla większych aplikacji. Wykorzystuje interfejs API IntersectionObserver, aby wstępnie wczytywać tylko moduły powiązane z linkami, które są aktualnie widoczne na stronie.

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

npm install --save ngx-quicklink

Gdy QuicklinkStrategy będzie dostępny w Twoim projekcie, możesz określić preloadingStrategy routera i zaimportować QuicklinkModule:

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

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

Po ponownym otwarciu aplikacji zauważysz, że router wstępnie wczyta tylko plik nyan-nyan-module.js, ponieważ przycisk na środku strony zawiera link do routera. Po otwarciu bocznego panelu nawigacyjnego zobaczysz, że router wstępnie wczyta trasę „Informacje”:

Używanie strategii wstępnego wczytywania Quicklink w wielu modułach leniwego ładowania

Powyższy przykład będzie działać w podstawowej aplikacji, ale jeśli Twoja aplikacja zawiera wiele modułów leniwego ładowania, musisz zaimportować QuicklinkModule do modułu udostępnionego, wyeksportować go, a następnie zaimportować do modułów leniwego ładowania.

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

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

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

Następnie zaimportuj SharedModule do wszystkich modułów leniwego ładowania:

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

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

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

Więcej niż podstawowe wstępne wczytywanie

Selektywne ładowanie wstępne za pomocą szybkiego linku może znacznie przyspieszyć nawigację, ale możesz zwiększyć efektywność swojej strategii wstępnego wczytywania sieci, wykorzystując wstępne wczytywanie z wyprzedzeniem (wdrażane przez Guess.js). Analizując raport z Google Analytics lub innego dostawcy usług analitycznych, Guess.js może przewidzieć drogę użytkownika przez nawigację i wstępnie wczytać tylko te fragmenty JavaScriptu, które prawdopodobnie będą potrzebne w następnej kolejności.

Aby dowiedzieć się, jak używać kodu Guess.js w połączeniu z Angular, wejdź na tę stronę w witrynie Guess.js.

Podsumowanie

Aby przyspieszyć nawigację przy zastosowaniu podziału kodu na poziomie trasy:

1. Wybierz odpowiednią strategię wstępnego wczytywania w zależności od rozmiaru aplikacji:
   • W aplikacjach z kilkoma modułami można korzystać z wbudowanej strategii PreloadAllModules Angular.
   • Aplikacje z wieloma modułami powinny korzystać z własnej strategii wstępnego wczytywania, np. szybkiego linku Angular lub wstępnego wczytywania, zgodnie z implementacją w kodzie Guess.js.
2. Skonfiguruj strategię wstępnego wczytywania, ustawiając właściwość preloadStrategy routera Angular.