Utiliser la taille de lot avec Travis CI

Milica Mihajlija

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 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 envoyez du code à GitHub. Vous pouvez configurer votre dépôt pour qu'il n'autorise la fusion des demandes d'extraction que si les tests de taille du bundle ont réussi.

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

Pour voir cela en action, voici une application groupée avec webpack qui vous permet de voter pour votre chaton préféré.

Définir le budget de performances

Ce Glitch contient déjà bundlesize.

• Cliquez sur Remix to Edit (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é ne dépasse pas 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. Le caractère générique * dans le chemin d'accès au fichier correspond à tous les noms de bundle du dossier public.

Créer un script de test

Étant donné que 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

Tout d'abord, créez un dépôt pour ce projet dans votre compte GitHub et initialisez-le avec un README.md.

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

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.

Autoriser bundlesize à publier des commentaires sur les demandes d'extraction

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

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

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

Pour lancer l'intégration continue, il vous faut un fichier .travis.yml qui indique à Travis CI ce qu'il doit faire. Pour accélérer le processus, il est déjà inclus dans le projet et spécifie que l'application utilise NodeJS.

Vous avez terminé la configuration. Bundlesize vous avertira si votre code JavaScript dépasse le budget. Même si vous commencez bien, les kilooctets peuvent s'accumuler au fil du temps à mesure que vous ajoutez de nouvelles fonctionnalités. 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 du 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 Tools > Git, Import, and Export > Export to GitHub.

2. Dans le pop-up, saisissez votre nom d'utilisateur GitHub et le nom du dépôt au format username/repo. Glitch exportera votre application vers une nouvelle branche nommé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.

Vous verrez maintenant des vérifications de l'état en cours sur la page de la demande d'extraction.

Il ne faudra pas longtemps pour que toutes les vérifications soient terminées. 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 bundle principal fait 266 Ko et le budget est de 170 Ko.

Optimiser

Heureusement, vous pouvez facilement améliorer 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, Importer et Exporter > 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.

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

Contrairement à Firebase, il n'est pas aussi facile d'importer des parties de la bibliothèque moment, mais cela vaut la peine d'essayer. Découvrez comment optimiser davantage l'application dans l'atelier de programmation sur la suppression du code inutilisé.

Surveiller

L'application est désormais dans le budget et tout va bien. Travis CI et bundlesize continueront de surveiller le budget de performance pour vous, afin de s'assurer que votre application reste rapide.