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 noti come pacchetti. Il raggruppamento in bundle è semplice, ma man mano che la tua app cresce, anche i tuoi bundle crescono. Devi monitorare le dimensioni dei bundle per assicurarti che non aumentino troppo grandi e influiscano sul tempo necessario per il caricamento dell'applicazione. Webpack supporta l'impostazione di budget del rendimento in base alle dimensioni degli asset e può tenere d'occhio le dimensioni dei bundle per te.

Per vedere come funziona, ecco un'app che conta i giorni restanti a capodanno. Si basa su React e moment.js. (Proprio come le app del mondo reale che fanno sempre più affidamento su framework e librerie. 😉)

Misura

Questo codelab contiene già l'app in bundle con il 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, potrebbe essere necessario utilizzare l'opzione Schermo intero).
3. Per ottenere un elenco con colori diversi degli asset e delle relative dimensioni, digita webpack nella console.

webpack

Il bundle principale è evidenziato in giallo perché ha dimensioni superiori a 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 avvisa, ma ti dà anche un consiglio su come ridimensionare i bundle. Puoi scoprire di più sulle tecniche consigliate su Web Fundamentals.

Imposta un budget di rendimento personalizzato

Un budget adeguato per le prestazioni dipenderà dalla natura del progetto. È sempre meglio eseguire le proprie ricerche. Una buona regola pratica è pubblicare meno di 170 kB di risorse percorso critico compresse/minime.

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 del rendimento è impostato in byte:

• 100.000 byte per singoli asset (maxAssetSize)
• 100.000 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 i suggerimenti sono:

1. warning (impostazione predefinita): mostra un messaggio di avviso giallo, ma la build ha esito positivo. È preferibile utilizzarlo negli ambienti di sviluppo.
2. error: viene visualizzato un messaggio di errore rosso, ma la build viene comunque accettata. Questa impostazione è consigliata per le build di produzione.
3. false: non vengono mostrati avvisi o errori.

Optimize

Lo scopo di un budget del rendimento è avvisarti in caso di problemi di prestazioni prima che diventino troppo difficili da risolvere. Esistono sempre più modi per creare un'app e alcune tecniche consentono tempi di caricamento più rapidi. (Molte di queste sono documentate qui nella sezione Ottimizzazione di JavaScript. 🤓)

Framework e librerie semplificano la vita degli sviluppatori, ma gli utenti finali non si preoccupano di come vengono create le app, ma solo della loro funzionalità e velocità. Se ti capita di dover superare il budget del rendimento, è il momento di pensare a possibili ottimizzazioni.

Nel mondo reale, i framework lato client di grandi dimensioni sono spesso difficili da sostituire, perciò è importante usarli con oculatezza. Con un po' di ricerche, spesso puoi trovare alternative più piccole alle librerie più note che funzionano allo stesso modo (date-fns è una buona alternativa per moment.js). A volte ha più senso non utilizzare alcun framework o una libreria se hanno un impatto significativo sulle prestazioni.

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

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 il webpack nella console per creare il bundle ottimizzato.

Dacci! Hai tagliato 223 KiB (230 kB) e l'app è al di sotto del budget.🎉

Monitoraggio

L'impostazione di un budget per le prestazioni nel webpack richiede solo un paio di righe di codice e ti avvisa se mai aggiungi (inavvertitamente) una grande dipendenza. Questo affermazione è "fuori vista, fuori mente", ma il webpack può fare in modo che tu sia sempre consapevole delle implicazioni per il rendimento.