Strategie di precaricamento del routing in Angular

Precarica i percorsi in anticipo 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 codice JavaScript associato a route che non sono inizialmente necessarie. In questo modo, il router Angular attende che un utente acceda a una determinata route 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 di rete e della larghezza di banda degli utenti. Un modo per risolvere questo problema è il precaricamento del percorso. Con il precaricamento, quando l'utente si trova su una determinata route, puoi scaricare e memorizzare nella cache il codice JavaScript associato alle route che probabilmente saranno necessarie successivamente. Il router Angular offre questa funzionalità fin dal primo avvio.

In questo post scoprirai come velocizzare la navigazione quando utilizzi la suddivisione del codice a livello di percorso sfruttando il precaricamento JavaScript in Angular.

Strategie di precaricamento del percorso 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 lento. Esaminiamo due possibili strategie:

• PreloadAllModules, che precarica tutte le route caricate tramite caricamento lento, come suggerisce il nome
• QuicklinkStrategy, che precarica solo le route associate 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 diverse route con caricamento lento. Per precaricarli tutti utilizzando la strategia PreloadAllModules, incorporata 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 controlla il riquadro Network (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:

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

Utilizzo della strategia di precaricamento per i link rapidi

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

La libreria quicklink fornisce 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 quicklink a un'app Angular utilizzando il pacchetto ngx-quicklink. Inizia installando il pacchetto da npm:

npm install --save ngx-quicklink

Quando è disponibile nel tuo progetto, puoi usare QuicklinkStrategy specificando preloadingStrategy del router e importando QuicklinkModule:

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

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

Ora, quando aprirai di nuovo l'applicazione, noterai che il router precarica soltanto nyan-nyan-module.js perché il pulsante al centro della pagina contiene un link al router. E quando apri la barra di navigazione laterale, noterai che il router precarica il percorso "Informazioni":

Utilizzo della strategia di precaricamento per il link rapido in più moduli con caricamento lento

L'esempio riportato sopra funziona per un'applicazione di base, ma se l'applicazione contiene più moduli a caricamento lento dovrai importare QuicklinkModule in un modulo condiviso, esportarlo e quindi importare il modulo condiviso nei tuoi moduli a caricamento lento.

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

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

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

Quindi importa il tuo SharedModule in tutti i moduli a caricamento lento:

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

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

Quicklinks sarà ora disponibile nei tuoi moduli con caricamento lento.

Andare oltre il precaricamento di base

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

Per informazioni su come utilizzare Guess.js con Angular, consulta questa pagina del sito Guess.js.

Conclusione

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

1. Scegli la giusta strategia di precaricamento in base alle dimensioni della tua applicazione:
   • Le applicazioni con pochi moduli possono utilizzare la strategia PreloadAllModules integrata di Angular.
   • Le applicazioni con molti moduli dovrebbero utilizzare una strategia di precaricamento personalizzata, come il quicklink di Angular, o il precaricamento predittivo, come implementato in Guess.js.
2. Configura la strategia di precaricamento impostando la proprietà preloadStrategy del router Angular.