Impostazione dei budget delle prestazioni con Webpack

Milica Mihajlija

Webpack combina tutti i file importati e li pacchettizza in uno o più file di output, chiamati bundle. I pacchetti sono utili, ma man mano che la tua app cresce, cresceranno anche i pacchetti. Devi monitorare le dimensioni dei bundle per assicurarti che non diventino troppo grandi e influiscano sul tempo di caricamento dell'applicazione. Webpack supporta l'impostazione di budget delle prestazioni in base alle dimensioni degli asset e può tenere d'occhio le dimensioni dei bundle per te.

Per vederla in azione, ecco un'app che conteggia i giorni che mancano a Capodanno. È realizzato con React e moment.js. Proprio come le app reali che si basano sempre più su framework e librerie. 😉)

Misura

Questo codelab contiene già l'app in bundle con webpack.

1. Fai clic su Remix per modificare per rendere il progetto modificabile.
2. Fai clic su Terminale (nota: se il pulsante Terminale non viene visualizzato, potresti dover utilizzare l'opzione Schermo intero).
3. Per visualizzare un elenco codificato a colori delle risorse e delle relative dimensioni, digita webpack nella console.

webpack

Il bundle principale è evidenziato in giallo perché è più grande di 244 KiB (250 KB).

Questi avvisi sono attivati per impostazione predefinita in modalità di produzione e la soglia predefinita è 244 KiB non compressi, sia per gli asset sia per i punti di contatto (la combinazione di tutti gli asset utilizzati durante il caricamento iniziale di una pagina).

Webpack non solo ti avvisa, ma ti fornisce anche un consiglio su come ridurre le dimensioni dei bundle. Per saperne di più sulle tecniche consigliate, consulta Nozioni di base sul web.

Impostare un budget di rendimento personalizzato

Un budget per le prestazioni appropriato dipende dalla natura del progetto. È sempre meglio fare le tue ricerche. Una buona regola di base è pubblicare meno di 170 KB di risorse del percorso critico compresse/minimizzate.

Per questa semplice demo, prova a essere ancora più prudente e imposta il budget su 100 KB (97,7 KiB). In webpack.config.js, aggiungi quanto segue:

module.exports = {
  //...
  performance: {
    maxAssetSize: 100000,
    maxEntrypointSize: 100000,
    hints: "warning"
  }
};

Il nuovo budget di rendimento è impostato in byte:

• 100000 byte per i singoli asset (maxAssetSize)
• 100000 byte per il punto di ingresso (maxEntrypointSize)

In questo caso, esiste un solo bundle che funge anche da punto di ingresso.

I valori possibili per hints sono:

1. warning (valore predefinito): viene visualizzato un messaggio di avviso giallo, ma la compilazione viene superata. È preferibile utilizzarlo negli ambienti di sviluppo.
2. error: viene visualizzato un messaggio di errore rosso, ma la compilazione viene comunque superata. Questa impostazione è consigliata per le build di produzione.
3. false: non vengono visualizzati avvisi o errori.

Ottimizza

Lo scopo di un budget di rendimento è avvisarti dei problemi di rendimento prima che diventino troppo difficili da risolvere. Esiste sempre più di un modo per sviluppare un'app e alcune tecniche consentono di velocizzare i tempi di caricamento. Molti di questi sono documentati proprio qui in Ottimizzazione del codice JavaScript. 🤓)

I framework e le librerie semplificano la vita degli sviluppatori, ma agli utenti finali non interessa molto come vengono create le app, ma solo che siano funzionali e veloci. Se superi il budget di rendimento, è il momento di pensare a possibili ottimizzazioni.

Nella realtà, i framework lato client di grandi dimensioni sono in genere difficili da sostituire, quindi è importante utilizzarli con saggezza. Con un po' di ricerca, spesso puoi trovare alternative più piccole alle librerie più diffuse che svolgono la stessa funzione (date-fns è una buona alternativa a moment.js). A volte ha più senso non utilizzare affatto un framework o una libreria se ha un impatto significativo sul rendimento.

La rimozione del codice inutilizzato è un buon modo per ottimizzare le app che includono librerie di terze parti di grandi dimensioni. La guida per la rimozione del codice non utilizzato spiega questa procedura in dettaglio e di seguito è riportato un modo rapido per riscrivere il codice del conto alla rovescia senza utilizzare moment.js.

In app/components/Countdown.jsx rimuovi:

const today = moment();
const yearEnd = moment().endOf('year');
const daysLeft = yearEnd.diff(today, 'days');

ed elimina questa riga:

const moment = require('moment');

Richiede un po' di matematica, ma puoi implementare lo stesso conto alla rovescia con JavaScript:

const today = new Date();
const year = today.getFullYear();
const yearEnd = new Date(year,11,31); //months are zero indexed in JS
const timeDiff = Math.abs(yearEnd.getTime() - today.getTime());
const daysLeft = Math.ceil(timeDiff / (1000 * 3600 * 24));

Ora rimuovi moment.js da package.json ed esegui di nuovo webpack nella console per compilare il bundle ottimizzato.

Ta-da! Hai risparmiato 223 KiB (230 KB) e l'app è entro il budget.🎉

Monitoraggio

La configurazione di un budget di rendimento in webpack richiede solo un paio di righe di codice e ti avvisa se aggiungi (accidentalmente) una dipendenza di grandi dimensioni. Come si dice, "fuori dalla vista, fuori dalla mente", ma webpack può assicurarti di essere sempre consapevole delle implicazioni sul rendimento.