Strategie di precaricamento del routing in Angular

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

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 non necessarie inizialmente. In questo modo, il router Angular attende fino a quando un utente non accede a una determinata route prima di attivare una richiesta di rete per scaricare il codice JavaScript associato.

Questa tecnica è ottima per il caricamento iniziale della pagina, ma può rallentare la navigazione, a seconda delle preferenze la latenza e la larghezza di banda della rete. Un modo per risolvere questo problema è il precaricamento del percorso. Utilizzando il precaricamento, quando l'utente si trova su un determinato percorso, puoi scaricare e memorizzare nella cache il codice JavaScript associato alle route che probabilmente saranno necessarie successivamente. Il router Angular fornisce questa funzionalità fin dal primo avvio.

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

Esegui il routing delle strategie di precaricamento 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. Vediamo due possibili strategie:

• PreloadAllModules, che precarica tutte le route con 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 esempio di app Angular. 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 osserva il riquadro Rete in Chrome DevTools:

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

Dovresti vedere che il router ha scaricato nyan-nyan-module.js e about-about-module.js in background all'apertura dell'applicazione:

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

Utilizzare la strategia di precaricamento Quicklink

PreloadAllModules è utile in molti casi. Quando si hanno decine di moduli, tuttavia, 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 intensivi nel thread dell'interfaccia utente e causare 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 link rapido a un'app Angular utilizzando il pacchetto ngx-quicklink. Installa innanzitutto il pacchetto da npm:

npm install --save ngx-quicklink

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

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

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

Quando riaprirai l'applicazione, noterai che il router precarica soltanto nyan-nyan-module.js, dato che il pulsante al centro della pagina è collegato a un router. Quando apri la barra di navigazione laterale, noterai che il router precarica quindi la sezione "Informazioni" percorso:

Usare la strategia di precaricamento Quicklink su più moduli con caricamento lento

L'esempio precedente funzionerà per un'applicazione di base, ma se la tua applicazione contiene più moduli con caricamento lento, dovrai importare QuicklinkModule in un modulo condiviso, esportarlo e quindi importare il modulo condiviso nei moduli con caricamento lento.

Innanzitutto importa QuicklinkModule da ngx-quicklink nel modulo condiviso ed esportalo:

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

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

Quindi importa SharedModule in tutti i moduli con caricamento lento:

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

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

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

Oltre il precaricamento di base

Sebbene il precaricamento selettivo tramite link rapido possa velocizzare notevolmente la navigazione, puoi rendere la tua strategia di precaricamento ancora più efficiente utilizzando il precaricamento predittivo, implementato da Guess.js. Analizzando un report di Google Analytics o di un altro provider di analisi, Guess.js può prevedere il percorso di navigazione di un utente e precaricare solo i blocchi JavaScript che probabilmente saranno necessari in seguito.

Puoi scoprire come utilizzare Guess.js con Angular in questa pagina sul sito di 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 dell'applicazione:
   • Le applicazioni con pochi moduli possono utilizzare la strategia PreloadAllModules integrata di Angular.
   • Le applicazioni con molti moduli dovrebbero usare 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.