Cet atelier de programmation est une extension de l'atelier de programmation "Minifier et compresser les charges utiles réseau" et suppose que vous maîtrisez les concepts de base de la compression. Par rapport à d'autres algorithmes de compression tels que gzip, cet atelier de programmation explique comment la compression Brotli peut réduire davantage les taux de compression et la taille globale de votre application.
Mesurer
Avant de vous lancer dans l'ajout d'optimisations, il est toujours judicieux d'analyser d'abord l'état actuel de l'application.
- Cliquez sur Remix to Edit (Remixer pour modifier) pour rendre le projet modifiable.
- Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur Plein écran
.
Dans l'atelier de programmation précédent sur la réduction et la compression des charges utiles réseau, nous avons réduit la taille de main.js de 225 Ko à 61,6 Ko. Dans cet atelier de programmation, vous allez découvrir comment la compression Brotli peut réduire encore davantage la taille de ce bundle.
Compression Brotli
Brotli est un algorithme de compression plus récent qui peut fournir des résultats de compression de texte encore meilleurs que gzip. Selon CertSimple, les performances de Brotli sont les suivantes:
- 14% plus petit que
gzippour JavaScript - 21% inférieur à
gzippour le code HTML - 17% plus petit que
gzippour les CSS
Pour que vous puissiez utiliser Brotli, votre serveur doit être compatible avec le protocole HTTPS. Brotli est compatible avec les dernières versions de la plupart des navigateurs. Les navigateurs compatibles avec Brotli incluront br dans les en-têtes Accept-Encoding:
Accept-Encoding: gzip, deflate, br
Vous pouvez déterminer l'algorithme de compression utilisé via le champ Content-Encoding de l'onglet "Réseau" des outils pour les développeurs Chrome (Command+Option+I ou Ctrl+Alt+I):
Activer Brotli
Compression dynamique
La compression dynamique implique la compression des éléments à la volée, à mesure qu'ils sont demandés par le navigateur.
Avantages
- Il n'est pas nécessaire de créer et de mettre à jour des versions compressées et enregistrées des éléments.
- La compression à la volée fonctionne particulièrement bien pour les pages Web générées dynamiquement.
Inconvénients
- La compression des fichiers à des niveaux supérieurs pour obtenir de meilleurs taux de compression prend plus de temps. Cela peut entraîner une perte de performances, car l'utilisateur attend que les éléments soient compressés avant d'être envoyés par le serveur.
Compression dynamique avec Node/Express
Le fichier server.js est responsable de la configuration du serveur de nœuds qui héberge l'application.
var express = require('express');
var app = express();
app.use(express.static('public'));
var listener = app.listen(process.env.PORT, function() {
console.log('Your app is listening on port ' + listener.address().port);
});
Actuellement, vous pouvez importer express et utiliser le middleware express.static pour charger tous les fichiers HTML, JS et CSS statiques dans public/directory (ces fichiers sont créés par le pack Web à chaque compilation).
Pour vous assurer que tous les éléments sont compressés à l'aide de brotli à chaque requête, vous pouvez utiliser le module shrink-ray. Commencez par l'ajouter en tant que devDependency dans package.json:
"devDependencies": {
//...
"shrink-ray": "^0.1.3"
},
Importez-le ensuite dans le fichier serveur, server.js:
var express = require('express');
var shrinkRay = require('shrink-ray');
Ajoutez-le en tant que middleware avant l'installation de express.static:
//...
var app = express();
// compress all requests
app.use(shrinkRay());
app.use(express.static('public'));
À présent, actualisez l'application et observez la taille du bundle dans le panneau "Network" (Réseau) :
Vous pouvez maintenant voir que brotli est appliqué à partir de bz dans l'en-tête Content-Encoding.
main.bundle.js est passé de 225 Ko à 53,1 Ko. Cela représente environ 14% de réduction par rapport à gzip (61,6 Ko).
Compression statique
L'idée derrière la compression statique est de compresser et d'enregistrer les éléments à l'avance.
Avantages
- La latence due à des niveaux de compression élevés n'est plus un problème. Il n'est plus nécessaire de compresser les fichiers à la volée, car ils peuvent désormais être récupérés directement.
Inconvénients
- Les éléments doivent être compressés à chaque build. La durée de compilation peut considérablement augmenter si des niveaux de compression élevés sont utilisés.
Compression statique avec Node/Express et Webpack
Étant donné que la compression statique implique la compression de fichiers à l'avance, les paramètres du pack Web peuvent être modifiés pour compresser les éléments dans le cadre de l'étape de compilation. Pour ce faire, vous pouvez utiliser brotli-webpack-plugin.
Commencez par l'ajouter en tant que devDependency dans package.json:
"devDependencies": {
//...
"brotli-webpack-plugin": "^1.1.0"
},
Comme pour tout autre plug-in webpack, importez-le dans le fichier de configuration, webpack.config.js:
var path = require("path");
//...
var BrotliPlugin = require('brotli-webpack-plugin');
Incluez-la dans le tableau "plugins" :
module.exports = {
// ...
plugins: [
// ...
new BrotliPlugin({
asset: '[file].br',
test: /\.(js)$/
})
]
},
Le tableau de plug-ins utilise les arguments suivants:
asset: nom de l'élément cible[file]est remplacé par le nom de fichier d'origine du fichier.test: tous les éléments qui correspondent à cette expression régulière (c'est-à-dire les éléments JavaScript se terminant par.js) sont traités.
Par exemple, main.js sera renommé main.js.br.
Lorsque l'application est actualisée et recréée, une version compressée du bundle principal est maintenant créée. Ouvrez la console Glitch pour examiner le contenu du répertoire public/ final diffusé par le serveur Node.
- Cliquez sur le bouton Outils.
- Cliquez sur le bouton Console.
- Dans la console, exécutez les commandes suivantes pour accéder au répertoire
publicet afficher tous ses fichiers:
cd public
ls -lh
La version compressée du bundle brotli, main.bundle.js.br, est désormais enregistrée ici également. Sa taille est environ 76% plus petite (225 Ko contre 53 Ko) que main.bundle.js.
Ensuite, indiquez au serveur d'envoyer ces fichiers compressés au format brotli chaque fois que leur version JS d'origine est demandée. Pour ce faire, définissez une nouvelle route dans server.js avant que les fichiers ne soient diffusés avec express.static.
var express = require('express');
var app = express();
app.get('*.js', (req, res, next) => {
req.url = req.url + '.br';
res.set('Content-Encoding', 'br');
res.set('Content-Type', 'application/javascript; charset=UTF-8');
next();
});
app.use(express.static('public'));
app.get permet d'indiquer au serveur comment répondre à une requête GET pour un point de terminaison spécifique. Une fonction de rappel permet ensuite de définir comment gérer cette requête. L'itinéraire fonctionne comme suit:
- Si vous spécifiez
'*.js'comme premier argument, cela fonctionne pour chaque point de terminaison déclenché pour extraire un fichier JS. - Dans le rappel,
.brest associé à l'URL de la requête, et l'en-tête de réponseContent-Encodingest défini surbr. - L'en-tête
Content-Typeest défini surapplication/javascript; charset=UTF-8pour spécifier le type MIME. - Enfin,
next()garantit que la séquence se poursuit avec tout rappel qui peut se produire ensuite.
Étant donné que certains navigateurs ne sont pas compatibles avec la compression brotli, vérifiez que brotli est compatible avant de renvoyer le fichier compressé en vérifiant que l'en-tête de requête Accept-Encoding inclut br:
var express = require('express');
var app = express();
app.get('*.js', (req, res, next) => {
if (req.header('Accept-Encoding').includes('br')) {
req.url = req.url + '.br';
console.log(req.header('Accept-Encoding'));
res.set('Content-Encoding', 'br');
res.set('Content-Type', 'application/javascript; charset=UTF-8');
}
next();
});
app.use(express.static('public'));
Une fois l'application actualisée, consultez à nouveau le panneau "Network" (Réseau).
Opération réussie. Vous avez utilisé la compression Brotli pour compresser davantage vos assets.
Conclusion
Cet atelier de programmation montre comment brotli peut réduire davantage la taille globale de votre application. Lorsqu'il est compatible, brotli est un algorithme de compression plus puissant que gzip.