Wstępnie wczytuj trasy z wyprzedzeniem, aby przyspieszyć nawigacji.
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:
- Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
- Kliknij kartę Sieć.
Widać, że router powinien pobrać w tle nyan-nyan-module.js
i about-about-module.js
po otwarciu aplikacji:
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.
Korzystanie ze strategii wstępnego wczytywania szybkiego linku
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:
Zastosowanie strategii wstępnego wczytywania Quicklink w wielu modułach wczytywanych metodą leniwego ładowania
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:
- 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.
- Aplikacje z niewielką liczbą modułów mogą korzystać ze strategii
- Aby skonfigurować strategię wstępnego wczytywania, ustaw właściwość
preloadStrategy
routera Angular.