Utilizzo di bundlesize con Travis CI

Milica Mihajlija

L'utilizzo di bundlesize con Travis CI consente di definire budget delle prestazioni con una configurazione minima e di applicarli come parte del flusso di lavoro di sviluppo. Travis CI è un servizio che esegue test per la tua app nel cloud ogni volta che esegui il push del codice su GitHub. Puoi configurare il tuo repository in modo che non consenta l'unione delle richieste di pull, a meno che i test delle dimensioni del bundle non siano stati superati.

I controlli GitHub di Bundlesize includono un confronto delle dimensioni con il ramo principale e un avviso in caso di un notevole aumento delle dimensioni.

Per vedere come funziona, ecco un'app in bundle con webpack che ti consente di votare il tuo gattino preferito.

Impostare il budget del rendimento

Questo Glitch contiene già la dimensione del set.

• Fai clic su Remix per modificare per rendere il progetto modificabile.

Il bundle principale di questa app si trova nella cartella pubblica. Per testarne le dimensioni, aggiungi la seguente sezione al file package.json:

"bundlesize": [
  {
    "path": "./public/*.bundle.js",
    "maxSize": "170 kB"
  }
]

Per mantenere le dimensioni del bundle JavaScript compresse al di sotto del limite consigliato, imposta il budget delle prestazioni su 170 kB nel campo maxSize.

Bundlesize supporta i pattern glob, pertanto il carattere jolly * nel percorso del file corrisponderà a tutti i nomi dei bundle nella cartella pubblica.

Creare uno script per il test

Poiché Travis ha bisogno di un test per essere eseguito, aggiungi uno script di test a package.json:

"scripts": {
  "start": "webpack && http-server -c-1",
  "test": "bundlesize"
}

Configura l'integrazione continua

Integra GitHub e Travis CI

Innanzitutto, crea un nuovo repository per questo progetto nel tuo account GitHub e inizializzalo con un README.md.

Devi registrare un account su Travis e attivare l'integrazione delle app GitHub nella sezione Impostazioni del tuo profilo.

Una volta creato l'account, vai a Settings (Impostazioni) sotto il tuo profilo, fai clic sul pulsante Sync account (Sincronizza account) e assicurati che il nuovo repository sia elencato su Travis.

Autorizza bundlesize a pubblicare nelle richieste pull

Bundlesize richiede l'autorizzazione per poter pubblicare post sulle richieste pull, quindi visita questo link per ottenere il token bundlesize che verrà archiviato nella configurazione Travis.

Nella dashboard Travis del progetto, vai a Altre opzioni > Impostazioni > Variabili di ambiente.

Aggiungi una nuova variabile di ambiente con il token come campo del valore e BUNDLESIZE_GITHUB_TOKEN come nome.

L'ultima cosa di cui hai bisogno per avviare l'integrazione continua è un file .travis.yml, che indica a Travis CI cosa fare. Per velocizzare le operazioni, è già incluso nel progetto e specifica che l'app utilizza NodeJS.

Con questo passaggio, è tutto pronto e la dimensione del pacchetto ti avvisa se il tuo codice JavaScript supera il budget. Anche quando inizi alla grande, man mano che aggiungi nuove funzionalità, possono accumularsi kilobyte. Con il monitoraggio automatico del budget del rendimento, hai la certezza che non passerà inosservato.

Prova

Attivare il primo test delle dimensioni del pacchetto

Per confrontare l'app con il budget delle prestazioni, aggiungi il codice al repository GitHub creato nel passaggio 3.

1. Su Glitch, fai clic su Strumenti > Git, importazione ed esportazione > Esporta in GitHub.

2. Nel popup, inserisci il tuo nome utente GitHub e il nome del repository come username/repo. Glitch esporterà la tua app in un nuovo ramo denominato "glitch".

3. Crea una nuova richiesta di pull facendo clic sul pulsante Nuova richiesta di pull nella home page del repository.

Ora vedrai i controlli dello stato in corso nella pagina delle richieste di pull.

Il completamento dei controlli non richiederà molto tempo. Sfortunatamente, l'app di voto cat è un po' esaurita e non supera il controllo del budget delle prestazioni. Il bundle principale è di 266 kB e il budget è di 170 kB.

Optimize

Fortunatamente, puoi ottenere alcuni semplici vantaggi in termini di prestazioni rimuovendo il codice inutilizzato. Esistono due importazioni principali in src/index.js:

import firebase from "firebase";
import * as moment from 'moment';

L'app utilizza il database Realtime di Firebase per archiviare i dati, ma importa l'intero pacchetto Firebase, che è costituito da molto più di un semplice database (autenticazione, spazio di archiviazione, messaggistica e così via).

Per risolvere il problema, importa solo il pacchetto necessario all'app nel file src/index.js:

import firebase from "firebase";
import firebase from 'firebase/app';
import 'firebase/database';

Ripetizione test

Poiché il file di origine è stato aggiornato, devi eseguire webpack per creare il nuovo file bundle.

1. Fai clic sul pulsante Strumenti.

2. Quindi, fai clic sul pulsante Console. La console si aprirà in un'altra scheda.

3. Nella console, digita webpack e attendi che la build venga completata.

4. Esporta il codice in GitHub da Strumenti > Git, importazione ed esportazione > Esporta in GitHub.

5. Vai alla pagina delle richieste di pull su GitHub e attendi il completamento di tutti i controlli.

Operazione riuscita. La nuova dimensione del bundle è 125,5 kB e tutti i controlli sono stati superati. 🎉

A differenza di Firebase, l'importazione di parti della raccolta dei momenti non può essere eseguita con la stessa facilità, ma ne vale la pena. Scopri come ottimizzare ulteriormente l'app nella pagina Rimuovere il codelab inutilizzato.

Monitora

L'app ora è al di sotto del budget e non ci sono problemi. Travis CI e bundlesize continueranno a monitorare il budget delle prestazioni per conto tuo, assicurando che la tua app rimanga veloce.