Utiliser la taille de lot avec Travis CI

L'utilisation de bundlesize avec Travis CI vous permet de définir des budgets de performances avec une configuration minimale et de les appliquer dans le cadre de votre workflow de développement. Travis CI est un service qui exécute des tests pour votre application dans le cloud chaque fois que vous transférez du code vers GitHub. Vous pouvez configurer votre dépôt afin qu'il n'autorise pas la fusion des demandes de tirage, sauf si les tests de taille de bundle ont réussi.

Les vérifications GitHub de Bundlesize incluent une comparaison de taille avec la branche principale et un avertissement en cas de forte augmentation de la taille.

Vérification de la taille du bundle sur GitHub

Pour voir comment cela fonctionne, voici une application groupée avec webpack qui vous permet de voter pour votre chat préféré.

Application de vote pour les chats

Définir le budget de performances

Ce glitch contient déjà bundlesize.

  • Cliquez sur Remixer pour modifier pour rendre le projet modifiable.

Le bundle principal de cette application se trouve dans le dossier public. Pour tester sa taille, ajoutez la section suivante au fichier package.json:

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

Pour que la taille du bundle JavaScript compressé reste inférieure à la limite recommandée, définissez le budget de performances sur 170 ko dans le champ maxSize.

Bundlesize est compatible avec les modèles glob, et le caractère générique * dans le chemin d'accès au fichier correspond à tous les noms de bundles dans le dossier public.

Créer un script de test

Comme Travis a besoin d'un test à exécuter, ajoutez un script de test à package.json:

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

Configurer un système d'intégration continue

Intégrer GitHub et Travis CI

Commencez par créer un dépôt pour ce projet dans votre compte GitHub et l'initialiser avec un README.md.

Vous devez enregistrer un compte sur Travis et activer l'intégration des applications GitHub dans la section "Paramètres" de votre profil.

Intégration de GitHub Apps sur Travis CI

Une fois que vous avez un compte, accédez à Settings (Paramètres) sous votre profil, cliquez sur le bouton Sync account (Synchroniser le compte) et assurez-vous que votre nouveau dépôt est listé sur Travis.

Bouton de synchronisation Travis CI

Autoriser bundlesize à publier sur les demandes d'extraction

Bundlesize a besoin d'une autorisation pour pouvoir publier des demandes d'extraction. Cliquez ici pour obtenir le jeton bundlesize qui sera stocké dans la configuration Travis.

Jeton de taille de bundle

Dans le tableau de bord Travis de votre projet, accédez à Plus d'options > Paramètres > Variables d'environnement.

Ajouter des variables d'environnement sur Travis CI

Ajoutez une variable d'environnement avec le jeton comme champ de valeur et BUNDLESIZE_GITHUB_TOKEN comme nom.

La dernière chose dont vous avez besoin pour lancer l'intégration continue est un fichier .travis.yml, qui indique à Travis CI ce qu'il doit faire. Pour accélérer les choses, il est déjà inclus dans le projet et indique que l'application utilise NodeJS.

Vous avez terminé cette étape. bundlesize vous avertira si votre code JavaScript dépasse le budget. Même si vous commencez bien, au fil du temps, à mesure que vous ajoutez de nouvelles fonctionnalités, les kilo-octets peuvent s'accumuler. Grâce à la surveillance automatisée du budget de performances, vous pouvez être sûr qu'il ne passera pas inaperçu.

Essayer

Déclencher votre premier test de taille de bundle

Pour voir comment l'application se compare au budget de performances, ajoutez le code au dépôt GitHub que vous avez créé à l'étape 3.

  1. Sur Glitch, cliquez sur Outils > Git, importation et exportation > Exporter vers GitHub.

  2. Dans le pop-up, saisissez votre nom d'utilisateur GitHub et le nom du dépôt sous la forme username/repo. Glitch exporte votre application vers une nouvelle branche appelée "glitch".

  3. Créez une demande d'extraction en cliquant sur le bouton New pull request (Nouvelle demande d'extraction) sur la page d'accueil du dépôt.

Les vérifications d'état en cours s'affichent désormais sur la page de la demande de tirage.

Vérifications GitHub en cours

Toutes les vérifications seront effectuées rapidement. Malheureusement, l'application de vote pour les chats est un peu trop volumineuse et ne passe pas le contrôle du budget de performances. Le lot principal est de 266 Ko et le budget est de 170 Ko.

Échec de la vérification de la taille du bundle

Optimiser

Heureusement, vous pouvez améliorer facilement les performances en supprimant le code inutilisé. Il existe deux importations principales dans src/index.js:

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

L'application utilise Firebase Realtime Database pour stocker les données, mais elle importe l'intégralité du package Firebase, qui comprend bien plus qu'une simple base de données (authentification, stockage, messagerie, etc.).

Pour résoudre ce problème, importez uniquement le package dont l'application a besoin dans le fichier src/index.js:

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

Réexécuter le test

Étant donné que le fichier source a été mis à jour, vous devez exécuter webpack pour créer le nouveau fichier de bundle.

  1. Cliquez sur le bouton Outils.

  2. Cliquez ensuite sur le bouton Console. La console s'ouvre dans un autre onglet.

  3. Dans la console, saisissez webpack et attendez la fin de la compilation.

  4. Exportez le code vers GitHub depuis Outils > Git, importation et exportation > Exporter vers GitHub.

  5. Accédez à la page de la demande d'extraction sur GitHub et attendez que toutes les vérifications soient terminées.

Vérification de la taille du bundle réussie

Opération réussie. La nouvelle taille du bundle est de 125,5 Ko, et toutes les vérifications ont réussi. 🎉

Contrairement à Firebase, l'importation de parties de la bibliothèque de moments ne peut pas être effectuée aussi facilement, mais cela vaut la peine d'essayer. Découvrez comment optimiser davantage l'application dans l'atelier de programmation Supprimer le code inutilisé.

Surveiller

L'application est désormais en dessous du budget, et tout va bien. Travis CI et bundlesize continueront de surveiller le budget de performances pour vous, en veillant à ce que votre application reste rapide.