Utilizzo di bundlesize con Travis CI

Milica Mihajlija

L'utilizzo di bundlesize con Travis CI ti consente di definire budget di rendimento 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 bundlesize 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 aumento significativo delle dimensioni.

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

Imposta il budget delle prestazioni

Questo Glitch contiene già bundlesize.

• Fai clic su Remix to Edit (Remixa per modificare) per rendere modificabile il progetto.

Il bundle principale di questa app si trova nella cartella public. 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 compresso al di sotto del limite consigliato, imposta il budget delle prestazioni su 170 kB nel campo maxSize.

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

Crea uno script per il test

Poiché Travis ha bisogno di un test da eseguire, aggiungi uno script per il 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 file README.md.

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

Una volta creato un account, vai su Impostazioni nel tuo profilo, fai clic sul pulsante Sincronizza account e assicurati che il nuovo repository sia elencato in Travis.

Autorizza bundlesize a pubblicare nelle richieste di pull

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

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

Aggiungi una nuova variabile di ambiente con il token come campo 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, la configurazione è completa e bundlesize ti avviserà se il tuo JavaScript supera il budget. Anche se inizi alla grande, nel tempo, man mano che aggiungi nuove funzionalità, i kilobyte possono accumularsi. Grazie al monitoraggio automatico del budget di rendimento, puoi stare tranquillo sapendo che non passerà inosservato.

Prova

Attiva il primo test bundlesize

Per vedere come l'app si confronta con il budget delle prestazioni, aggiungi il codice al repository GitHub che hai creato nel passaggio 3.

1. In Glitch, fai clic su Strumenti > Git, importa ed esporta > 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 della richiesta di pull.

Non ci vorrà molto prima che tutti i controlli siano completati. Purtroppo, l'app per il voto dei gatti è un po' gonfia e non supera il controllo del budget delle prestazioni. Il bundle principale è di 266 kB e il budget è di 170 kB.

Ottimizza

Per fortuna, puoi ottenere alcuni facili miglioramenti del rendimento rimuovendo il codice inutilizzato. Esistono due importazioni principali in src/index.js:

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

L'app utilizza Firebase Realtime Database per archiviare i dati, ma importa l'intero pacchetto Firebase, che consiste in molto più di un semplice database (autenticazione, storage, messaggistica e così via).

Per risolvere il problema, importa solo il pacchetto di cui l'app ha bisogno 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. Poi fai clic sul pulsante Console. La console si aprirà in un'altra scheda.

3. Nella console, digita webpack e attendi il completamento della build.

4. Esporta il codice in GitHub da Strumenti > Git, importa ed esporta > Esporta in GitHub.

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

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

A differenza di Firebase, l'importazione di parti della libreria moment non è così semplice, ma vale la pena provare. Scopri come ottimizzare ulteriormente l'app nel codelab Rimuovi codice inutilizzato.

Monitoraggio

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 te, assicurandoti che la tua app rimanga veloce.