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.
Voici une application fournie avec webpack, qui vous permet de voter pour votre chat préféré.
Définir le budget de performance
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é 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
Étant donné que Travis a besoin d'un test pour s'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.
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 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.
Dans le tableau de bord Travis de votre projet, accédez à More options > Settings > Environment variables (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.
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.
Dans Glitch, cliquez sur Tools > Git, Import and Export > Export to GitHub (Outils > Git, Importer et Export > Exporter vers GitHub).
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".Créez une demande d'extraction en cliquant sur le bouton Nouvelle demande d'extraction sur la page d'accueil du dépôt.
Vous verrez désormais les vérifications de l'état en cours sur la page de demande d'extraction.
Toutes les vérifications seront effectuées en peu de temps. Malheureusement, l'application de vote pour chats est un peu gonflée et ne passe pas la vérification du budget de performance. Le lot principal est de 266 Ko et le budget est de 170 Ko.
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, n'importez que 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.
Cliquez sur le bouton Tools (Outils).
Cliquez ensuite sur le bouton Console. La console s'ouvre dans un autre onglet.
Dans la console, saisissez
webpacket attendez la fin de la compilation.Exportez le code vers GitHub depuis Outils > Git, importation et exportation > Exporter vers GitHub.
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, l'importation de parties de la bibliothèque des moments ne peut pas être aussi facile, mais cela en vaut la peine. 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 à surveiller le budget de performances à votre place pour vous assurer que votre application reste rapide.