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 ładowania aplikacji przez opóźnienie uruchamiania 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 ścieżki wczytywane z opóźnieniem, jak wskazuje nazwa;
  • QuicklinkStrategy, która 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 w działaniu.

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 przydatna 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 wpłynąć na jego działanie.

Biblioteka quicklink to lepsza strategia w przypadku większych aplikacji. Używa on interfejsu IntersectionObserver, aby wstępnie wczytywać tylko moduły powiązane z linkami, które są obecnie widoczne na stronie.

Możesz dodać szybki link do aplikacji Angular, używając pakietu ngx-quicklink. Najpierw zainstaluj pakiet z npm:

npm install --save ngx-quicklink

Gdy będzie ona dostępna w Twoim projekcie, możesz użyć QuicklinkStrategy, podając preloadingStrategy routera 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”:

Prezentacja 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 QuicklinkModule z ngx-quicklink do udostępnionego modułu i go wyeksportuj:

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 a wczytywanie rozszerzone

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 dzielenia kodu na poziomie przekierowań:

  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 w Angularze.
    • 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.