Budget delle prestazioni con l'interfaccia a riga di comando Angular

Monitora le dimensioni dei bundle nel tempo per assicurarti che la tua applicazione rimanga veloce.

Minko Gechev

L'ottimizzazione di un'applicazione Angular è importante, ma come è possibile assicurarsi che le sue prestazioni non regredino nel tempo? Introduci le metriche sul rendimento e le monitora su ogni modifica al codice.

Una metrica importante è la dimensione del codice JavaScript fornito con l'applicazione. L'introduzione di un budget di rendimento da monitorare per ogni richiesta di build o pull consente di mantenere le ottimizzazioni nel tempo.

Calcolare il budget del rendimento

Puoi utilizzare questo Calcolatore del budget online per stimare quanto JavaScript può permettersi di caricare la tua app, a seconda del Tempo all'interattività che vuoi raggiungere.

Configura un budget delle prestazioni nell'interfaccia a riga di comando Angular

Una volta ottenuto un budget JavaScript target, puoi applicarlo utilizzando l'interfaccia a riga di comando (CLI) di Angular. Per sapere come funziona, dai un'occhiata a questa app di esempio su GitHub.

Vedrai che in angular.json è stato configurato il seguente budget:

"budgets": [{
  "type": "bundle",
  "name": "main",
  "maximumWarning": "170kb",
  "maximumError": "250kb"
}]

Ecco un riepilogo di ciò che viene specificato:

• Esiste un budget per un bundle JavaScript chiamato main.
• Se il bundle main supera i 170 kB, l'interfaccia a riga di comando Angular mostrerà un avviso nella console quando crei l'app.
• Se il bundle main supera le dimensioni di 250 kB, la build non andrà a buon fine.

Ora prova a creare l'app eseguendo ng build --prod.

Nella console dovresti visualizzare questo errore:

Per correggere l'errore di generazione, dai un'occhiata a app.component.ts, che include un'importazione da rxjs/internal/operators. Si tratta di un'importazione privata che non dovrebbe essere utilizzata dai consumatori di rxjs. Le dimensioni del bundle aumentano notevolmente. Quando esegui l'aggiornamento all'importazione corretta (rxjs/operators) ed esegui di nuovo la build, noterai che ha superato il controllo del budget.

Tieni presente che, poiché il caricamento differenziale è abilitato per impostazione predefinita nell'interfaccia a riga di comando Angular, il comando ng build produce due build dell'app:

• Una build per i browser con supporto di ECMAScript 2015. Questa build include meno polyfill e una sintassi JavaScript più moderna. Questa sintassi è più espressiva, il che genera pacchetti più piccoli.
• Una build per i browser meno recenti senza supporto ECMAScript 2015. La sintassi precedente è meno espressiva e richiede più polyfill, il che genera bundle più grandi.

Il file index.html dell'app di esempio fa riferimento a entrambe le build, in modo che i browser moderni possano sfruttare la build ECMAScript 2015 più piccola, mentre i browser meno recenti possono ricorrere alla build ECMAScript 5.

Imponi il budget nell'ambito dell'integrazione continua

L'integrazione continua (CI) offre un modo pratico per monitorare il budget della tua app nel tempo. Fortunatamente, il modo più rapido per configurarlo è creare la tua app con l'interfaccia a riga di comando Angular, senza bisogno di passaggi aggiuntivi. Ogni volta che il bundle JavaScript supera il budget, il processo viene chiuso con il codice 1 e la build non riesce.

Se preferisci, puoi anche applicare un budget delle prestazioni utilizzando bundlesize e Lighthouse. La principale differenza tra i budget delle prestazioni nell'interfaccia a riga di comando Angular e in Lighthouse è il momento in cui vengono eseguiti i controlli. L'interfaccia a riga di comando Angular esegue i controlli al momento della creazione, esaminando gli asset di produzione e verificando le relative dimensioni. Tuttavia, Lighthouse apre la versione di cui è stato eseguito il deployment dell'applicazione e misura le dimensioni dell'asset. Entrambi gli approcci hanno i loro pro e i loro contro. Il controllo eseguito dall'interfaccia a riga di comando Angular è meno affidabile, ma molto più veloce poiché si tratta di una ricerca su un singolo disco. D'altra parte, LightWallet di Lighthouse può eseguire un controllo molto accurato considerando le risorse caricate dinamicamente, ma deve eseguire il deployment e aprire l'app ogni volta che viene eseguita.

bundlesize è molto simile al controllo del budget dell'interfaccia a riga di comando Angular; la differenza principale è che bundlesize può mostrare i risultati del controllo direttamente nell'interfaccia utente di GitHub.

Conclusione

Stabilisci i budget delle prestazioni con l'interfaccia a riga di comando Angular per assicurarti che le prestazioni della tua app Angular non regredino nel tempo:

1. Imposta una base di riferimento per la dimensione della risorsa utilizzando un calcolatore del budget o seguendo le prassi della tua organizzazione.
2. Configura i budget per le dimensioni in angular.json in projects.[PROJECT-NAME].architect.build.configurations.production.budgets
3. I budget verranno applicati automaticamente a ogni build con l'interfaccia a riga di comando Angular.
4. Valuta la possibilità di introdurre il monitoraggio del budget come parte dell'integrazione continua (che può essere ottenuta anche con l'interfaccia a riga di comando Angular).