Strategie di precaricamento del routing in Angular

Precarica in anticipo le route per velocizzare la navigazione degli utenti.

Minko Gechev

La suddivisione del codice a livello di route può aiutarti a ridurre il tempo di caricamento iniziale di un'applicazione ritardando il JavaScript associato alle route non necessarie inizialmente. In questo modo, il router Angular attende che un utente acceda a un determinato percorso prima di attivare una richiesta di rete per scaricare il codice JavaScript associato.

Sebbene questa tecnica sia ottima per il caricamento iniziale della pagina, può rallentare la navigazione, a seconda della latenza e della larghezza di banda della rete degli utenti. Un modo per risolvere questo problema è il precaricamento dei percorsi. Con il precaricamento, quando l'utente si trova in un determinato percorso, puoi scaricare e memorizzare nella cache il codice JavaScript associato ai percorsi che probabilmente saranno necessari in seguito. Il router Angular fornisce questa funzionalità pronta all'uso.

In questo post, imparerai ad accelerare la navigazione quando utilizzi la suddivisione del codice a livello di route sfruttando il precaricamento di JavaScript in Angular.

Strategie di precaricamento dei percorsi in Angular

Il router Angular fornisce una proprietà di configurazione denominata preloadingStrategy, che definisce la logica per il precaricamento e l'elaborazione dei moduli Angular con caricamento differito. Verranno illustrate due possibili strategie:

  • PreloadAllModules, che precompila tutti i percorsi con caricamento differito, come suggerisce il nome
  • QuicklinkStrategy, che precarica solo i percorsi associati ai link nella pagina corrente.

Il resto di questo post fa riferimento a un'app Angular di esempio. Puoi trovare il codice sorgente su GitHub.

Utilizzo della strategia PreloadAllModules

L'app di esempio ha diversi percorsi caricati in modo lazy. Per precaricarli tutti utilizzando la strategia PreloadAllModules, integrata in Angular, specificala come valore per la proprietà preloadingStrategy nella configurazione del router:

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

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

Ora pubblica l'applicazione e osserva il riquadro Rete in Chrome DevTools:

  1. Premi "Control+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
  2. Fai clic sulla scheda Rete.

Quando hai aperto l'applicazione, dovresti vedere che il router ha scaricato nyan-nyan-module.js e about-about-module.js in background:

La strategia PreloadAllModules in azione.

Il router ha anche registrato le dichiarazioni delle route dei moduli in modo che, quando accedi a un URL associato a uno dei moduli pre caricati, la transizione sia istantanea.

PreloadAllModules è utile in molti casi. Tuttavia, se hai dozzine di moduli, il precaricamento aggressivo può aumentare notevolmente l'utilizzo della rete. Inoltre, poiché il router deve registrare le route in tutti i moduli precaricati, può causare calcoli intensivi nel thread dell'interfaccia utente e portare a un'esperienza utente lenta.

La libreria quicklink offre una strategia migliore per le app più grandi. Utilizza l'API IntersectionObserver per precaricare solo i moduli associati ai link attualmente visibili nella pagina.

Puoi aggiungere un link rapido a un'app Angular utilizzando il pacchetto ngx-quicklink. Per iniziare, installa il pacchetto da npm:

npm install --save ngx-quicklink

Una volta che è disponibile nel progetto, puoi utilizzare QuicklinkStrategy specificando il preloadingStrategy del router e importando il QuicklinkModule:

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

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

Ora, quando apri di nuovo l'applicazione, noterai che il router precarica solo nyan-nyan-module.js poiché il pulsante al centro della pagina ha un link al router. Quando apri il menu di navigazione laterale, noterai che il router precarica il percorso "Informazioni":

Una demo della strategia di precaricamento dei link rapidi.

L'esempio riportato sopra funziona per un'applicazione di base, ma se la tua applicazione contiene più moduli con caricamento differito, dovrai importare QuicklinkModule in un modulo condiviso, esportarlo e poi importare il modulo condiviso nei moduli con caricamento differito.

Per prima cosa, importa QuicklinkModule da ngx-quicklink nel tuo modulo condiviso ed esportalo:

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

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

Importa SharedModule in tutti i moduli con caricamento differito:

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

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

Quicklinks sarà ora disponibile nei moduli con caricamento differito.

Oltre il caricamento anticipato di base

Sebbene il precaricamento selettivo tramite quicklink possa velocizzare notevolmente la navigazione, puoi rendere la tua strategia di precaricamento ancora più efficiente sulla rete utilizzando il precaricamento predittivo, implementato da Guess.js. Analizzando un report di Google Analytics o di un altro fornitore di analisi, Guess.js può prevedere il percorso di navigazione di un utente e precaricare solo i chunk JavaScript che potrebbero essere necessari in seguito.

Puoi scoprire come utilizzare Guess.js con Angular in questa pagina del sito di Guess.js.

Conclusione

Per velocizzare la navigazione quando utilizzi la suddivisione del codice a livello di route:

  1. Scegli la strategia di precaricamento più adatta in base alle dimensioni dell'applicazione:
    • Le applicazioni con pochi moduli possono utilizzare la strategia PreloadAllModules integrata di Angular.
    • Le applicazioni con molti moduli devono utilizzare una strategia di precaricamento personalizzata, come il link rapido di Angular o il precaricamento predittivo, come implementato in Guess.js.
  2. Configura la strategia di precaricamento impostando la proprietà preloadStrategy del router Angular.