ngx-fastboot — Come aumentare la velocità di Angular all’avvio
Se preferisci leggere l’articolo in inglese, puoi trovarlo qui: https://iacopociao1992.medium.com/ngx-fastboot-how-to-increase-angular-velocity-at-bootstrap-b8e74e846bd1.
Il mondo dello sviluppo web è in continua evoluzione, e con esso le tecniche e le strategie per ottimizzare le prestazioni delle nostre applicazioni. Uno dei problemi più comuni che gli sviluppatori Angular devono affrontare è il tempo di caricamento iniziale dell’applicazione. Con l’aumentare delle dimensioni dell’applicazione, diventa sempre più importante trovare soluzioni per migliorare le performance e l’esperienza utente. In questo contesto, entra in gioco ngx-fastboot.
Che cos’è ngx-fastboot?
ngx-fastboot è una libreria pensata per caricare dinamicamente le configurazioni delle applicazioni Angular, ottimizzando così il tempo di avvio e riducendo le dimensioni del bundle iniziale 🎉
Quando utilizzare ngx-fastboot?
Non ci sono limitazioni per integrare ngx-fastboot nel nostro progetto Angular: possiamo integrarlo fin da subito o aspettare fino a quando il peso del nostro bundle non comincia a farsi sentire 🤟
Perché usare ngx-fastboot?
- Riduzione della dimensione del bundle iniziale: Una delle principali ragioni per cui dovremmo considerare l’uso di ngx-fastboot è la capacità di ridurre le dimensioni del bundle iniziale della tua applicazione. Caricando le configurazioni in chunk separati, si riduce il peso del bundle principale, permettendo all’applicazione di avviarsi più velocemente.
- Miglioramento delle performance: Con bundle più piccoli, il tempo di caricamento iniziale dell’applicazione diminuisce notevolmente. Questo è particolarmente importante per gli utenti con connessioni lente, dove ogni kilobyte conta. Migliorare le performance significa anche migliorare l’esperienza utente complessiva.
- Rispettare i budget consigliati: Angular può generare warning e errori se le dimensioni del bundle iniziale superano i limiti consigliati. Utilizzando ngx-fastboot per distribuire il carico su più chunk, puoi ridurre la probabilità di incorrere in questi problemi e mantenere il tuo progetto conforme alle best practices di Angular.
Installazione
L’installazione di ngx-fastboot è semplice e veloce. Possiamo aggiungere la libreria al nostro progetto Angular eseguendo il seguente comando da terminale:
npm install ngx-fastbootUtilizzo
Una volta installata la libreria, possiamo iniziare a usarla per caricare dinamicamente le configurazioni della nostra applicazione 🚀
Creiamo il nostro primo file di configurazione in src/configs/angular.configs.ts . ngx-fastboot supporta nativamente sia i default import che i named import, per comodità useremo quello di default:
import { provideHttpClient } from '@angular/common/http';
import { EnvironmentProviders, Provider, provideZoneChangeDetection } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
export default [
provideHttpClient(),
ReactiveFormsModule,
provideZoneChangeDetection({ eventCoalescing: true }),
] satisfies Array<Provider | EnvironmentProviders>;Adesso importiamolo nel nostro src/main.ts:
import { AppComponent } from './app.component';
import { bootstrapApplication } from '@angular/platform-browser';
import { fast } from 'ngx-fastboot';
fast(bootstrapApplication, AppComponent, {
providers: [
() => import('./configs/angular.configs.ts'),
]
}).catch(error => {
console.error('Error bootstrapping the app', error);
});ngx-fastboot ci consente di includere i provider utilizzando l’approccio statico di bootstrapApplication, permettendoci di controllare con precisione quali configurazioni rendere dinamiche e quali mantenere statiche:
import { AppComponent } from './app.component';
import { bootstrapApplication } from '@angular/platform-browser';
import { fast } from 'ngx-fastboot';
fast(bootstrapApplication, AppComponent, {
providers: [
{ provide: 'BACKEND_BASE_URL', useValue: 'http://localhost:3000' },
() => import('./configs/angular.configs.ts'),
]
}).catch(error => {
console.error('Error bootstrapping the app', error);
});Performance
A scopo di esempio, creiamo un’applicazione Angular in cui inizializziamo AngularFire e Sentry utilizzando l’approccio classico. Dopo la compilazione, il bundle avrà una struttura simile alla seguente:
Initial chunk files | Names | Raw size | Estimated transfer size
main-P4HRQQFP.js | main | 659.65 kB | 180.05 kB
chunk-7LRM2SDL.js | - | 53.90 kB | 15.44 kB
polyfills-DXJ4KTXW.js | polyfills | 34.52 kB | 11.29 kB
styles-5INURTSO.css | styles | 0 bytes | 0 bytes
| Initial total | 748.07 kB | 206.78 kB
Lazy chunk files | Names | Raw size | Estimated transfer size
chunk-GV3HVVF4.js | index-esm | 121 bytes | 121 bytes
Application bundle generation complete. [3.898 seconds]
▲ [WARNING] bundle initial exceeded maximum budget. Budget 512.00 kB was not met by 236.07 kB with a total of 748.07 kB.
Con questo approccio abbiamo già superato il limite di dimensione del bundle, generando un avviso durante la compilazione di Angular!
Tuttavia, applicando ngx-fastboot, il bundle finale avrà una struttura simile alla seguente:
Initial chunk files | Names | Raw size | Estimated transfer size
chunk-JNUXFHNR.js | - | 194.41 kB | 52.59 kB
polyfills-DXJ4KTXW.js | polyfills | 34.52 kB | 11.29 kB
main-7SK3ZYUR.js | main | 19.74 kB | 5.46 kB
chunk-ACKELEN3.js | - | 898 bytes | 898 bytes
styles-5INURTSO.css | styles | 0 bytes | 0 bytes
| Initial total | 249.57 kB | 70.24 kB
Lazy chunk files | Names | Raw size | Estimated transfer size
chunk-OBCCKT3U.js | - | 238.00 kB | 68.07 kB
chunk-YXL5OYKA.js | firebase-config | 207.55 kB | 57.22 kB
chunk-4UC3UY4L.js | - | 53.03 kB | 15.14 kB
chunk-5G2DL2YO.js | sentry-init | 365 bytes | 365 bytes
chunk-J34TBXQP.js | sentry-config | 257 bytes | 257 bytes
chunk-V4EU5ISS.js | index-esm | 149 bytes | 149 bytes
chunk-DUM2C7A7.js | core-config | 143 bytes | 143 bytes
Application bundle generation complete. [3.864 seconds]
Le configurazioni di Firebase, Sentry e Angular vengono suddivise in chunk separati, ottenendo un risultato decisamente più ottimizzato:
Potete effettuare lo stesso test sulle due versioni dell’applicazione all’interno di questo repository github:
Conclusioni
ngx-fastboot è uno strumento semplice e potente per ottimizzare le prestazioni delle applicazioni Angular. Caricando le configurazioni dinamicamente, puoi ridurre le dimensioni del bundle iniziale, migliorare il tempo di caricamento e mitigare i warning di compilazione. Se stai cercando un modo per ottimizzare il bundle e velocizzare la tua applicazione Angular, ngx-fastboot è sicuramente una soluzione da considerare.
Se hai apprezzato questa guida, non dimenticarti di 👏 e di condividerla con tutte le persone che potrebbero trarne beneficio 😃
So long, and thanks for all the fish 🐬
