Che cos'è il budget CLI angolare?
Il budget è una delle funzionalità meno conosciute della CLI angolare. È una funzionalità piuttosto piccola ma molto accurata!
Man mano che le applicazioni aumentano di funzionalità, aumentano anche di dimensioni. I budget sono una funzionalità dell'interfaccia della riga di comando angolare che consente di impostare soglie di budget nella configurazione per garantire che parti dell'applicazione rimangano entro i limiti impostati - Documentazione ufficiale
O in altre parole, possiamo descrivere la nostra applicazione angolare come un insieme di file JavaScript compilati chiamati bundle che sono prodotti dal processo di compilazione. I budget angolari ci consentono di configurare le dimensioni previste di questi pacchetti. Inoltre, possiamo configurare le soglie per le condizioni in cui desideriamo ricevere un avviso o addirittura non riuscire a creare un errore se la dimensione del bundle diventa troppo fuori controllo!
Come definire un budget?
I budget angolari sono definiti nel file angular.json. I budget sono definiti per progetto, il che ha senso perché ogni app in un'area di lavoro ha esigenze diverse.
Pensando in modo pragmatico, ha senso solo definire budget per le build di produzione. Prod build crea bundle con "dimensioni reali" dopo aver applicato tutte le ottimizzazioni come il tree-shaking e la minimizzazione del codice.
Oops, un errore di build! È stata superata la dimensione massima del pacchetto. Questo è un ottimo segnale che ci dice che qualcosa è andato storto ...
- Potremmo aver sperimentato la nostra funzione e non aver pulito correttamente
- I nostri strumenti possono andare storti ed eseguire un'importazione automatica errata oppure selezioniamo articoli errati dall'elenco di importazioni suggerito
- Potremmo importare cose da moduli pigri in luoghi inappropriati
- La nostra nuova funzionalità è davvero grande e non si adatta ai budget esistenti
Primo approccio: i tuoi file sono compressi con zip?
In generale, il file gzipped ha solo circa il 20% delle dimensioni del file originale, il che può ridurre drasticamente il tempo di caricamento iniziale della tua app. Per verificare se hai decompresso i tuoi file, basta aprire la scheda di rete della console per sviluppatori. Nelle "Header di risposta", se dovresti vedere "Codifica del contenuto: gzip", sei a posto.
Come decomprimere?
Se ospiti la tua app Angular nella maggior parte delle piattaforme cloud o CDN, non dovresti preoccuparti di questo problema poiché probabilmente hanno gestito questo per te. Tuttavia, se hai il tuo server (come NodeJS + expressJS) che serve la tua app Angular, controlla sicuramente se i file sono compressi con gzip. Di seguito è riportato un esempio per decomprimere le risorse statiche in un'app NodeJS + expressJS. Difficilmente si può immaginare che questa semplice "compressione" del middleware ridurrebbe le dimensioni del bundle da 2,21 MB a 495,13 KB.
const compression = require('compression')
const express = require('express')
const app = express()
app.use(compression())
Secondo approccio: analizzare il fascio angolare
Se la dimensione del pacchetto diventa troppo grande, potresti voler analizzare il pacchetto perché potresti aver utilizzato un pacchetto di terze parti inappropriato di grandi dimensioni o hai dimenticato di rimuovere un pacchetto se non lo usi più. Webpack ha una straordinaria funzionalità per darci un'idea visiva della composizione di un pacchetto webpack.
È super facile ottenere questo grafico.
npm install -g webpack-bundle-analyzer- Nella tua app Angular, esegui
ng build --stats-json(non utilizzare flag --prod). Abilitando --stats-jsonotterrai un file aggiuntivo stats.json
- Infine, esegui
webpack-bundle-analyzer ./dist/stats.jsone il tuo browser farà apparire la pagina su localhost: 8888. Divertiti con esso.
riferimento 1: In che modo i budget CLI angolari hanno salvato la mia giornata e come possono salvare i tuoi
rif 2: Ottimizza la dimensione del fascio angolare in 4 passaggi