Impostazione dei budget delle prestazioni con Webpack

Milica Mihajlija

Webpack combina tutti i file importati e li raggruppa in uno o più file di output noti come bundle. Il bundling è utile, ma man mano che la tua app cresce, cresceranno anche i bundle. 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 sotto controllo le dimensioni dei bundle.

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

Misura

Questo codelab contiene già l'app raggruppata con webpack.

1. Fai clic su Remixa per modificare per rendere il progetto modificabile.
2. Fai clic su Terminale (nota: se il pulsante Terminale non viene visualizzato, potrebbe essere necessario utilizzare l'opzione Schermo intero).
3. Per ottenere un elenco degli asset e delle relative dimensioni con codice colore, 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 che per i punti di ingresso (la combinazione di tutti gli asset utilizzati durante il caricamento iniziale di una pagina).

Webpack non solo ti avviserà, ma ti darà anche un consiglio su come ridurre le dimensioni dei bundle. Puoi scoprire di più sulle tecniche consigliate su Web Fundamentals.

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 empirica è quella di fornire meno di 170 KB di risorse critical-path compresse/ridotte.

Per questa semplice demo, prova a essere ancora più conservativo 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:

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

In questo caso, c'è un solo bundle che funge anche da punto di ingresso.

I valori possibili per hints sono:

1. warning (impostazione predefinita): viene visualizzato un messaggio di avviso giallo, ma la build viene superata. È consigliabile utilizzarlo negli ambienti di sviluppo.
2. error: visualizza un messaggio di errore rosso, ma la build 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 per il rendimento è avvisarti dei problemi di rendimento prima che diventino troppo difficili da risolvere. Esiste sempre più di un modo per creare un'app e alcune tecniche consentono di ottenere tempi di caricamento più rapidi. Molte di queste sono documentate qui in Ottimizzazione di JavaScript. 🤓)

Framework e 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 ti accorgi di superare il budget per il rendimento, è il momento di pensare a possibili ottimizzazioni.

Nel mondo reale, 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 è più sensato non utilizzare un framework o una libreria se ha un impatto significativo sulle prestazioni.

La rimozione del codice inutilizzato è un buon modo per ottimizzare le app che includono librerie di terze parti di grandi dimensioni. La guida alla rimozione del codice inutilizzato spiega questo processo in dettaglio. Ecco 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 calcoli matematici, ma puoi implementare lo stesso conto alla rovescia con JavaScript puro:

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 creare il bundle ottimizzato.

Ta-da! Hai ridotto le dimensioni di 223 KiB (230 KB) e l'app rientra nel budget.🎉

Monitoraggio

La configurazione di un budget di rendimento in webpack richiede solo un paio di righe di codice e ti avviserà se mai (accidentalmente) aggiungerai una dipendenza di grandi dimensioni. Il detto recita "Lontano dagli occhi, lontano dal cuore", ma webpack può assicurarsi che tu sia sempre consapevole delle implicazioni sul rendimento.