Strategie wstępnego wczytywania trasy w Angular

Aby przyspieszyć nawigację użytkowników, załaduj wcześniej przekierowania.

Minko Gechev

Dzielenie kodu na poziomie przekierowań może pomóc w zmniejszeniu początkowego czasu wczytywania aplikacji przez opóźnienie ładowania kodu JavaScript powiązanego z przekierowaniami, które nie są początkowo potrzebne. W ten sposób router Angular czeka, aż użytkownik przejdzie do określonej ścieżki, a potem uruchamia żądanie sieciowe, aby pobrać powiązany plik JavaScript.

Ta technika jest świetna w przypadku początkowego wczytywania strony, ale może spowolnić nawigację w zależności od opóźnienia i przepustowości sieci użytkownika. Jednym ze sposobów rozwiązania tego problemu jest wstępne wczytywanie tras. Dzięki wstępnemu pobieraniu, gdy użytkownik znajduje się na danej trasie, możesz pobrać i przechowywać w pamięci podręcznej kod JavaScript powiązany z trasami, które mogą być potrzebne w kolejnym kroku. Router Angulara zapewnia tę funkcję w standardzie.

Z tego artykułu dowiesz się, jak przyspieszyć nawigację, stosując podział kodu na poziomie trasy, korzystając z wstępnego wczytania kodu JavaScript w Angular.

Strategie wstępnego wczytywania tras w Angular

Przekaźnik Angulara udostępnia właściwość konfiguracji o nazwie preloadingStrategy, która definiuje logikę wczytywania wstępnego i przetwarzania modułów Angulara wczytywanych z opóźnieniem. Omówimy 2 możliwe strategie:

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

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

Korzystanie ze strategii PreloadAllModules

Przykładowa aplikacja zawiera kilka leniwie wczytywanych tras. Aby wstępnie załadować wszystkie z nich za pomocą strategii PreloadAllModules, która jest wbudowana w Angular, określ ją jako wartość właściwości preloadingStrategy w konfiguracji routera:

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

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

Teraz wyświetl aplikację i sprawdź panel Sieć w Narzędziach deweloperskich w Chrome:

  1. Aby otworzyć Narzędzia dla programistów, naciśnij `Control+Shift+J` (lub `Command+Option+J` na Macu).
  2. Kliknij kartę Sieć.

Gdy otworzysz aplikację, router powinien pobrać nyan-nyan-module.js i about-about-module.js w tle:

Strategia PreloadAllModules działa.

Router zarejestrował też deklaracje trasy modułów, dzięki czemu przenoszenie do adresu URL powiązanego z dowolnym z wstępnie załadowanych modułów odbywa się natychmiastowo.

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. Ponieważ router musi zarejestrować trasy we wszystkich wstępnie załadowanych modułach, może to spowodować intensywne obliczenia w wątku interfejsu użytkownika i w efekcie spowolnić działanie.

Biblioteka quicklink zapewnia lepszą strategię w przypadku większych aplikacji. Używa on interfejsu IntersectionObserver API, aby wstępnie wczytywać tylko moduły powiązane z linkami, które są obecnie 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 otworzysz aplikację ponownie, zauważysz, że router tylko wstępnie wczytuje nyan-nyan-module.js, ponieważ przycisk na środku strony zawiera link do routera. Gdy otworzysz menu boczne, zauważysz, że router wczytuje stronę „O tym programie”:

Demonstracja strategii wstępnego wczytywania szybkich linków.

Powyższy przykład dotyczy podstawowej aplikacji, ale jeśli Twoja aplikacja zawiera wiele modułów wczytywanych z opóźnieniem, musisz zaimportować QuicklinkModule do modułu współdzielonego, wyeksportować go, a potem zaimportować moduł współdzielony do modułów wczytywanych z opóźnieniem.

Najpierw zaimportuj plik QuicklinkModule z aplikacji 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 SharedModule do wszystkich modułów wczytywanych z opóźnieniem:

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

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

Quicklinks będzie teraz dostępny w Twoich modułach wczytywanych z opóźnieniem.

Wczytywanie podstawowe z dodatkowymi funkcjami

Wybrane wstępne wczytywanie za pomocą szybkiego linku może znacznie przyspieszyć nawigację, ale możesz jeszcze bardziej zwiększyć wydajność sieci dzięki wstępnemu wczytywaniu z wykorzystaniem przewidywania, które jest implementowane przez Guess.js. Dzięki analizie raportu z Google Analytics lub innego dostawcy usług analitycznych Guess.js może przewidzieć ścieżkę użytkownika i wstępnie wczytywać tylko te fragmenty kodu JavaScript, które prawdopodobnie będą potrzebne w kolejnym kroku.

Informacje o używaniu Guess.js z Angularem znajdziesz na tej stronie na stronie 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ć z wbudowanej strategii PreloadAllModules Angulara.
    • Aplikacje z wiele modułami powinny używać niestandardowej strategii wstępnego wczytywania, takiej jak quicklink w Angularze lub wstępne wczytywanie przewidujące, jak w Guess.js.
  2. Aby skonfigurować strategię wstępnego wczytywania, ustaw właściwość preloadStrategy routera Angular.