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.
Pour voir comment cela fonctionne, voici une application groupée avec webpack qui vous permet de voter pour votre chat préféré.
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.
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 à 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.
Sur Glitch, cliquez sur Outils > Git, importation et exportation > 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 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.
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.
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.
Cliquez sur le bouton Outils.
Cliquez ensuite sur le bouton Console. La console s'ouvre dans un autre onglet.
Dans la console, saisissez
webpack
et 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 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.