Lazy Loading in Angular (mettilo al lavoro sul tuo sito web)

Angular è un framework JavaScript frontend sviluppato da Google per la creazione di applicazioni Web scalabili di livello aziendale. Alcune di queste applicazioni possono diventare piuttosto grandi, influenzando il tempo di caricamento dell'applicazione.

Per ridurre il tempo di caricamento e migliorare l'esperienza complessiva dei tuoi utenti, puoi utilizzare una tecnica nota come lazy loading. Questa funzionalità nativa di Angular ti consente di caricare prima solo i bit richiesti dell'app Web, quindi caricare altri moduli secondo necessità.

In questo articolo imparerai a conoscere il caricamento lento e come può aiutarti a velocizzare la tua app web.

Che cos'è il caricamento lento?

Il lazy loading si riferisce alla tecnica di caricare gli elementi della pagina Web solo quando sono richiesti. La sua controparte è il caricamento impaziente , quando tutto viene caricato, o tenta di caricarsi, immediatamente. Recuperare con impazienza tutte le immagini, i video, i CSS e il codice JavaScript potrebbe significare lunghi tempi di caricamento: cattive notizie per gli utenti.

Il caricamento lento viene spesso utilizzato per immagini e video su siti che ospitano molti contenuti. Invece di caricare tutti i media contemporaneamente, il che consumerebbe molta larghezza di banda e impantanerebbe le visualizzazioni di pagina, questi elementi vengono caricati quando la loro posizione sulla pagina sta per scorrere nella visualizzazione.

Angular è un framework applicativo a pagina singola che si basa su JavaScript per gran parte delle sue funzionalità. La raccolta di JavaScript della tua app può facilmente diventare grande man mano che l'app cresce e questo comporta un corrispondente aumento dell'utilizzo dei dati e del tempo di caricamento. Per velocizzare le cose, puoi utilizzare il caricamento lento per recuperare prima i moduli richiesti e rinviare il caricamento di altri moduli fino a quando non saranno necessari.

Vantaggi del Lazy Loading in Angular

Il caricamento lento offre vantaggi che renderanno il tuo sito più user-friendly. Questi includono:

• Tempo di caricamento più veloce: JavaScript contiene le istruzioni per visualizzare la tua pagina e caricare i suoi dati. Per questo motivo, è una risorsa che blocca il rendering . Ciò significa che il browser deve attendere per caricare tutto il codice JavaScript prima di eseguire il rendering della pagina. Durante il caricamento lento in Angular, il codice JavaScript viene suddiviso in blocchi che vengono caricati separatamente. Il blocco iniziale contiene solo la logica necessaria per il modulo principale della pagina. Viene caricato con entusiasmo, quindi i moduli rimanenti vengono caricati pigramente. Riducendo la dimensione del blocco iniziale, il caricamento e il rendering del sito saranno più veloci.
• Minore utilizzo dei dati: suddividendo i dati in blocchi e caricandoli secondo necessità, potresti utilizzare meno larghezza di banda.
• Risorse del browser conservate: poiché il browser carica solo i blocchi necessari, non spreca memoria e CPU nel tentativo di interpretare e rendere il codice non richiesto.

Implementazione del caricamento pigro in Angular

Per seguire questo tutorial, avrai bisogno di quanto segue:

• NodeJS installato
• Conoscenza base di Angular

Migliora il tuo progetto

Utilizzerai la CLI di Angular per creare il tuo progetto. Puoi installare la CLI usando npm eseguendo il comando:

npm install -g @angular/cli

Successivamente, crea un progetto denominato Lazy Loading Demo in questo modo:

ng new lazy-loading-demo --routing

Quel comando crea un nuovo progetto Angular, completo di routing. Lavorerai esclusivamente nella cartella src/app , che contiene il codice per la tua app. Questa cartella contiene il file di routing principale, app-routing.module.ts . La struttura della cartella dovrebbe essere simile a questa:

Crea un Feature Module con Routes

Successivamente, creerai un modulo di funzionalità che verrà caricato in modo lento. Per creare questo modulo, esegui questo comando:

ng generate module blog --route blog --module app.module

Questo comando crea un modulo denominato BlogModule , insieme al routing. Se apri src /app/app-routing.module.ts , vedrai che ora assomiglia a questo:

 import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; const routes: Routes = [ { path: 'blog', loadChildren: () => import('./blog/blog.module').then(m => m.BlogModule) }]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

La parte importante per il lazy loading è la terza riga:

 const routes: Routes = [ { path: 'blog', loadChildren: () => import('./blog/blog.module').then(m => m.BlogModule) }];

Quella linea definisce i percorsi. La route per il blog usa l'argomento loadChildren invece di component . L'argomento loadChildren indica ad Angular di eseguire il lazy load della route, per importare dinamicamente il modulo solo quando la route viene visitata e quindi restituirla al router. Il modulo definisce le proprie route secondarie, come blog/** , nel suo file routing.module.ts . Il modulo del blog che hai generato ha questo aspetto:

 import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { BlogComponent } from './blog.component'; const routes: Routes = [{ path: '', component: BlogComponent }]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class BlogRoutingModule { }

Noterai che questo file di routing contiene un singolo percorso, '' . Questo risolve per /blog e punta a BlogComponent. Puoi aggiungere più componenti e definire quei percorsi in questo file.

Ad esempio, se desideri aggiungere un componente che estragga i dettagli su un particolare post del blog, puoi creare il componente con questo comando:

ng generate component blog/detail

Ciò genera il componente per i dettagli del blog e lo aggiunge al modulo del blog. Per aggiungere un percorso per esso, puoi semplicemente aggiungerlo al tuo array di percorsi:

 const routes: Routes = [{ path: '', component: BlogComponent }, {path:"/:title",component: DetailComponent}];

Questo aggiunge un percorso che risolve per blog/:title (ad esempio, blog/angular-tutorial ). Questa matrice di percorsi è caricata in modo pigro e non è inclusa nel pacchetto iniziale.

Verifica caricamento lento

Puoi facilmente verificare che il caricamento lento funzioni eseguendo ng serve e osservando l'output. Nella parte inferiore del tuo output, dovresti ottenere qualcosa del genere:

L'output sopra è diviso in due parti: Initial Chunk Files sono i file caricati quando la pagina viene caricata per la prima volta. Lazy Chunk Files sono caricati in modo pigro. Il modulo blog è elencato in questo esempio.

Verifica del caricamento lento tramite i registri di rete del browser

Un altro modo per confermare il caricamento lento è utilizzare la scheda Rete nel pannello Strumenti per sviluppatori del browser. (Su Windows, è F12 in Chrome e Microsoft Edge e Ctrl - Maiusc - I in Firefox. Su un Mac, è Comando - Opzione - I in Chrome, Firefox e Safari.)

Seleziona il filtro JS per visualizzare solo i file JavaScript caricati sulla rete. Dopo il caricamento iniziale dell'app, dovresti ottenere qualcosa del genere:

Quando navighi su /blog , noterai che viene caricato un nuovo blocco, src_app_blog_blog_module_ts.js . Ciò significa che il tuo modulo è stato richiesto solo quando hai navigato verso quella rotta e viene caricato pigramente. Il registro di rete dovrebbe essere simile a questo:

Caricamento lento vs caricamento impaziente

Per fare un confronto, creiamo anche un modulo caricato con impazienza e vediamo come influisce sulla dimensione del file e sul tempo di caricamento. Per dimostrarlo, creerai un modulo per l'autenticazione. Tale modulo potrebbe dover essere caricato con entusiasmo, poiché l'autenticazione è qualcosa che potresti richiedere a tutti gli utenti.

Genera un AuthModule eseguendo questo comando nella CLI:

ng generate module auth --routing --module app.module

Ciò genera il modulo e un file di routing. Inoltre aggiunge il modulo al file app.module.ts . Tuttavia, a differenza del comando che abbiamo usato per generare un modulo l'ultima volta, questo non aggiunge un percorso a caricamento lento. Usa il parametro --routing invece di --route <name> . Ciò aggiunge il modulo di autenticazione all'array imports in app.module.ts :

 @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, AuthModule //added auth module ], providers: [], bootstrap: [AppComponent] })

L'aggiunta di AuthModule all'array delle importazioni di AppModule significa che il modulo di autenticazione viene aggiunto ai file chunk iniziali e verrà incluso con il pacchetto JavaScript principale. Per verificarlo, puoi eseguire di nuovo ng serve e osservare l'output:

Come puoi vedere, il modulo di autenticazione non è incluso come parte dei file lazy chunk. Inoltre, la dimensione del pacchetto iniziale è aumentata. Le dimensioni del file main.js quasi raddoppiate, passando da 8 KB a 15 KB. In questo esempio, l'aumento è minimo, poiché i componenti non contengono molto codice. Ma, man mano che riempi i componenti con la logica, questa dimensione del file aumenterà, creando un valido argomento per il caricamento lento.

Riepilogo

Hai imparato come utilizzare il lazy loading in Angular per recuperare i moduli solo quando sono richiesti. Il lazy loading è un'ottima tecnica per migliorare i tempi di caricamento, ridurre l'utilizzo dei dati e utilizzare al meglio le risorse di front-end e back-end.

Il caricamento lento, insieme a tecnologie come le reti di distribuzione dei contenuti e la minimizzazione di JavaScript, miglioreranno sia le prestazioni del tuo sito Web che la soddisfazione dei tuoi utenti.

Se state sviluppando un sito WordPress e volete davvero aumentare la velocità, leggete Kinsta Edge Caching per vedere alcuni numeri impressionanti.