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 de sorte qu'il n'autorise pas la fusion des demandes d'extraction, sauf si les tests de bundlesize ont réussi.
Les vérifications GitHub de Bundlesize incluent une comparaison de la taille avec la branche principale et un avertissement en cas de grand écart de taille.
Pour le voir en action, voici une application fournie 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 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 groupe JavaScript compressé inférieur à la limite recommandée soit définie, définissez un budget de performances de 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 groupe 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
Commencez par créer un dépôt pour ce projet sur votre compte GitHub et initialisez-le 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 la publication de bundlesize sur les demandes d'extraction
Bundlesize a besoin d'une autorisation pour pouvoir publier des messages sur des requêtes d'extraction. Accédez donc à ce lien pour obtenir le jeton de 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 faut faire. Pour accélérer les choses, il est déjà inclus dans le projet et indique que l'application utilise NodeJS.
Cette étape est terminée, et bundlesize vous avertit si votre code JavaScript dépasse le budget. Même si vous commencez bien, au fil du temps, les kilo-octets peuvent s'accumuler à mesure que vous ajoutez de nouvelles caractéristiques. Grâce à la surveillance automatisée du budget de performances, vous avez l'assurance qu'elle ne passera pas inaperçue.
Essayer
Déclencher votre premier test de taille de bundle
Pour comparer l'application 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, importation et exportation > Exporter vers GitHub).
Dans la fenêtre pop-up, saisissez votre nom d'utilisateur GitHub et le nom du dépôt en tant que
username/repo. Glitch exporte votre application vers une nouvelle branche nommé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 de l'état sont désormais en cours sur la page de demande d'extraction.
Il ne faudra pas longtemps avant que toutes les vérifications soient terminées. Malheureusement, l'application de vote sur les chats est un peu surchargée et ne passe pas la vérification du budget de performances. Le groupe principal fait 266 Ko et le budget est de 170 Ko.
Optimisation
Heureusement, vous pouvez améliorer facilement les performances en supprimant le code inutilisé. src/index.js se compose de deux importations principales:
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
Comme 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
webpacket attendez la fin de la compilation.Exportez le code vers GitHub depuis Tools > Git, Import, and Export > Export to GitHub (Outils > Git, importation et exportation > Exporter vers GitHub).
Accédez à la page de 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 été effectuées. 🎉
Contrairement à Firebase, importer des parties de la bibliothèque Moment ne peut pas être aussi facile, 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 n'a plus le budget et tout va bien. Travis CI et bundlesize continueront de surveiller le budget de performances pour vous, afin que votre application reste rapide.