Angular è un framework JavaScript frontend sviluppato da Google per la creazione di applicazioni web scalabili di livello enterprise. Alcune di queste applicazioni possono diventare molto grandi e influire sul tempo di caricamento dell’applicazione.
Per ridurre i tempi di caricamento e migliorare l’esperienza complessiva dei vostri utenti, potete usare una tecnica nota come lazy loading (letteralmente “caricamento pigro”). Questa funzione nativa di Angular vi permette di caricare prima solo le parti necessarie dell’applicazione web, per poi caricare gli altri moduli in base alle necessità.
In questo articolo scoprirete come funziona il lazy loading e come può aiutarvi a velocizzare la vostra applicazione web.
Cos’È il Lazy Loading?
Il lazy loading si riferisce alla tecnica di caricare gli elementi della pagina web solo quando sono necessari. La sua controparte è l’eager loading, quando tutto viene caricato – o si cerca di farlo – immediatamente. Recuperare tutte le immagini, i video, i CSS e il codice JavaScript in modo avventato può significare tempi di caricamento lunghi, una pessima notizia per gli utenti.
Il lazy loading è spesso usato per le immagini e i video nei siti che ospitano molti contenuti. Invece di caricare tutti i media in una volta sola, cosa che consumerebbe molta banda e rallenterebbe le visualizzazioni della pagina, questi elementi vengono caricati quando la loro posizione sulla pagina sta per essere visualizzata.
Angular è un framework per applicazioni a pagina singola che si basa su JavaScript per gran parte delle sue funzionalità. La collezione di JavaScript della vostra applicazione può facilmente aumentare man mano che l’applicazione cresce, con un conseguente aumento dell’utilizzo dei dati e del tempo di caricamento. Per accelerare i tempi, potete usare il lazy loading per recuperare prima i moduli necessari e rimandare il caricamento degli altri moduli fino a quando non sono necessari.
Vantaggi del Lazy Loading in Angular
Il lazy loading offre vantaggi che rendono il vostro sito più facile da usare. Questi includono:
- Tempi di caricamento più rapidi: JavaScript contiene le istruzioni per la visualizzazione della pagina e il caricamento dei dati. Per questo motivo, è una risorsa che blocca il rendering. Ciò significa che il browser deve attendere il caricamento di tutto il JavaScript prima di eseguire il rendering della pagina. Durante il lazy loading in Angular, il JavaScript viene suddiviso in parti che vengono caricate separatamente. Il pezzo iniziale contiene solo la logica necessaria per il modulo principale della pagina. Viene caricato in modo eager, quindi i moduli rimanenti vengono caricati in modo lazy. Riducendo le dimensioni del pezzo iniziale, il sito verrà caricato e renderizzato più velocemente.
- Minore utilizzo di dati: Suddividendo i dati in parti e caricandoli quando necessario, potrete usare meno larghezza di banda.
- Conservazione delle risorse del browser: Poiché il browser carica solo i pezzi necessari, non spreca memoria e CPU cercando di interpretare e renderizzare codice non necessario.
Implementare il Lazy Loading in Angular
Per seguire questo tutorial, avrete bisogno di quanto segue:
- NodeJS installato
- Conoscenza di base di Angular
Creare il Vostro Progetto
Per creare il vostro progetto userete la CLI di Angular. Potete installare la CLI usando npm ed eseguendo il comando:
npm install -g @angular/cli
Dopodiché, create un progetto chiamato Lazy Loading Demo come questo:
ng new lazy-loading-demo --routing
Questo comando crea un nuovo progetto Angular, completo di routing. Lavorerete esclusivamente nella cartella src/app, che contiene il codice della vostra applicazione. Questa cartella contiene il file di routing principale, app-routing.module.ts. La struttura della cartella dovrebbe essere la seguente:
Creare un Modulo Funzionale con il Routing
Successivamente, creerete un modulo funzionale che verrà caricato con lazy loading. Per creare questo modulo, eseguite questo comando:
ng generate module blog --route blog --module app.module
Questo comando crea un modulo chiamato BlogModule, insieme al routing. Se aprite src/app/app-routing.module.ts, vedrete che ora ha questo aspetto:
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) }];
Questa riga definisce i percorsi (routes). Il route per il blog utilizza l’argomento loadChildren invece di component. L’argomento loadChildren indica ad Angular di caricare in modo lazy il route, ossia di importare dinamicamente il modulo solo quando il route viene visitato, per poi restituirlo al router. Il modulo definisce i propri route figli, come per esempio blog/**, nel suo file routing.module.ts. Il modulo del blog che avete generato si presenta così:
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 { }
Noterete che questo file di routing contiene un solo percorso, ''. Questo si risolve per /blog e punta al BlogComponent. Potete aggiungere altri componenti e definire i relativi percorsi in questo file.
Per esempio, se voleste aggiungere un componente che raccolga i dettagli di un particolare articolo del blog, potreste creare il componente con questo comando:
ng generate component blog/detail
Questo genera il componente per i dettagli del blog e lo aggiunge al modulo blog. Per aggiungere un percorso, potete semplicemente aggiungerlo all’array dei routes:
const routes: Routes = [{ path: '', component: BlogComponent },
{path:"/:title",component: DetailComponent}];
Questo aggiunge un percorso che si risolve per blog/:title (per esempio, blog/angular-tutorial). Questo array di routes è caricato in modo lazy e non è incluso nel bundle iniziale.
Verificare il Lazy Loading
Potete verificare facilmente che il lazy loading funzioni eseguendo ng serve e osservando l’output. In fondo all’output, dovreste ottenere qualcosa di simile a questo:
ng serve di Angular.L’output qui sopra è diviso in due parti: Initial Chunk Files sono i file caricati al primo caricamento della pagina. Lazy Chunk Filessono i file caricati in modo lazy. Il modulo blog è mostrato in questo esempio.
Verifica del Lazy Loading Attraverso i Log di Rete del Browser
Un altro modo per confermare il lazy loading è quello di usare la scheda Rete nel pannello Strumenti per sviluppatori del browser. (Su Windows è F12 in Chrome e Microsoft Edge e Ctrl-Shift-I in Firefox. Su Mac è Command-Option-I in Chrome, Firefox e Safari)
Selezionate il filtro JS per visualizzare solo i file JavaScript caricati in rete. Dopo il caricamento iniziale dell’applicazione, dovreste ottenere qualcosa di simile a questo:
Quando navigate su /blog, noterete che è stato caricato un nuovo chunk, src_app_blog_blog_module_ts.js. Questo significa che il vostro modulo è stato richiesto solo quando avete navigato verso quel percorso e viene caricato con lazy loading. Il log di rete dovrebbe essere simile a questo:
Lazy Loading vs Eager Loading
Per fare un paragone, creiamo anche un modulo caricato con eager loading e vediamo come influisce sulla dimensione del file e sul tempo di caricamento. Per dimostrarlo, creeremo un modulo per l’autenticazione. Un modulo di questo tipo potrebbe avere bisogno di essere caricato con eager loading, poiché l’autenticazione è un’operazione che potreste richiedere a tutti gli utenti.
Generate un AuthModule eseguendo questo comando nella CLI:
ng generate module auth --routing --module app.module
Questo 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 lazy-loaded. Usa il parametro --routing invece di --route <name>. Questo 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 AppModule imports significa che il modulo di autenticazione viene aggiunto ai file chunk iniziali e sarà incluso nel bundle JavaScript principale. Per verificarlo, potete eseguire nuovamente ng serve e osservare l’output:
ng serve di Angular dopo l’aggiunta del modulo di autenticazione.Come potete vedere, il modulo di autenticazione non è incluso nei chunk di file lazy. Inoltre, le dimensioni del bundle iniziale sono aumentate. Il file main.js è quasi raddoppiato, passando da 8 KB a 15 KB. In questo esempio, l’aumento è minimo perché i componenti non contengono molto codice. Tuttavia, man mano che i componenti vengono riempiti di logica, le dimensioni del file aumenteranno, il che rende più che mai opportuno il lazy loading.
Riepilogo
Avete imparato a usare il lazy loading in Angular per recuperare i moduli solo quando sono necessari. Il lazy loading è un’ottima tecnica per migliorare i tempi di caricamento, ridurre l’utilizzo dei dati e utilizzare meglio le risorse del frontend e del backend.
Il lazy loading, insieme a tecnologie come le reti di distribuzione dei contenuti (CDN) e la minificazione di JavaScript, migliorerà le prestazioni del vostro sito web e la soddisfazione dei vostri utenti.
Se state sviluppando un sito WordPress e volete aumentare la velocità, leggete Kinsta Edge Caching e scoprirete numeri impressionanti.
Di giorno è un digital product manager, ma è anche un appassionato di tecnologia, sempre alle prese con tecnologie diverse. I suoi interessi includono framework web e mobile, sviluppo NoCode e sviluppo di blockchain.
Lascia un commento