Réduire et compresser les charges utiles du réseau avec des brotli

Michael DiBlasio

Cet atelier de programmation est une extension de l'atelier de programmation Réduire et compresser les charges utiles réseau atelier de programmation et suppose que vous connaissez les concepts de base de la compression. En tant que par rapport à d'autres algorithmes de compression comme 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 la taille de l'image.

Mesurer

Avant de vous lancer dans l'ajout d'optimisations, il est toujours judicieux d'analyser l'état actuel de l'application.

1. Cliquez sur Remix to Edit (Remixer pour modifier) pour pouvoir modifier le projet.
2. Pour prévisualiser le site, appuyez sur Afficher l'application. Appuyez ensuite sur Plein écran

La précédente réduction des charges utiles réseau atelier de programmation, nous avons réduit la taille de main.js de 225 Ko à 61,6 Ko. Dans cet atelier de programmation, nous verrons comment la compression Brotli peut réduire encore plus la taille du paquet.

Compression brotli

Brotli est un algorithme de compression plus récent qui peut fournir une compression de texte encore meilleure que gzip. Selon Avec CertSimple, les performances de Brotli sont:

• 14% inférieure à gzip pour JavaScript
• 21% inférieure à gzip pour le format HTML
• 17% inférieure à gzip pour le 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. Navigateurs compatibles avec Brotli inclura br dans les en-têtes Accept-Encoding:

Accept-Encoding: gzip, deflate, br

Vous pouvez déterminer l'algorithme de compression utilisé via 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 consiste à compresser les éléments à la volée, au fur et à mesure demandé par le navigateur.

Avantages

• Il n'est pas nécessaire de créer ni de mettre à jour des versions compressées enregistrées des éléments terminé.
• La compression à la volée fonctionne particulièrement bien pour les pages Web générés dynamiquement.

Inconvénients

• La compression des fichiers à des niveaux supérieurs pour obtenir de meilleurs taux de compression plus longtemps. Cela peut entraîner une perte de performances, car l'utilisateur attend que les éléments soient compresser avant qu'ils ne soient envoyés par le serveur.

Compression dynamique avec Node/Express

Le fichier server.js est chargé de configurer le 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, cela consiste à importer express et à utiliser le express.static pour charger tous les fichiers HTML, JS et CSS statiques public/directory (et ces fichiers sont créés par webpack avec chaque build).

Tous les éléments sont compressés à l'aide de Brotli chaque fois qu'ils sont demandé, le shrink-ray module. 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 qu'intergiciel avant l'installation de express.static:

//...
var app = express();

// compress all requests
app.use(shrinkRay());

app.use(express.static('public'));

Actualisez l'application et examinez la taille du bundle dans le panneau "Network" :

Vous pouvez 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. Elle est environ 14% plus petite par rapport à gzip (61,6 Ko).

Compression statique

L'idée derrière la compression statique est de compresser les éléments et de les enregistrer en amont. de temps.

Avantages

• La latence due à des niveaux de compression élevés n'est plus une préoccupation. Rien doit être effectuée à la volée pour compresser les fichiers, car ils peuvent désormais être récupérés directement.

Inconvénients

• Les éléments doivent être compressés à chaque compilation. Les durées de compilation peuvent augmenter de manière significative si des niveaux de compression élevés sont utilisés.

Compression statique avec Node/Express et webpack

La compression statique implique la compression de fichiers à l'avance. peuvent être modifiés pour compresser les éléments lors de l'étape de compilation. La 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');

Et incluez-le dans le tableau de 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 de l'élément.
• test: tous les éléments correspondant à 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 à présent créé. Ouvrez la console Glitch pour voir le contenu final Répertoire public/ diffusé par le serveur Node.

1. Cliquez sur le bouton Tools (Outils).
2. Cliquez sur le bouton Console.
3. Dans la console, exécutez les commandes suivantes pour passer à public et voir tous ses fichiers:

cd public
ls -lh

La version compressée de brotli du bundle, main.bundle.js.br, est maintenant enregistrée et sa taille est d'environ 76% (225 Ko contre 53 Ko) main.bundle.js

Ensuite, demandez au serveur d'envoyer ces fichiers compressés brotli chaque fois que versions JS originales sont demandées. Pour ce faire, vous pouvez définir 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 une un point de terminaison spécifique. Une fonction de rappel est ensuite utilisée pour définir la manière de gérer ce requête. L'itinéraire fonctionne de la manière suivante:

• Si vous spécifiez '*.js' comme premier argument, cela fonctionne pour chaque qui est déclenché pour récupérer un fichier JS.
• Dans le rappel, .br est associé à l'URL de la requête. L'en-tête de réponse Content-Encoding est défini sur br.
• L'en-tête Content-Type est défini sur application/javascript; charset=UTF-8 pour spécifier le type MIME.
• Enfin, next() garantit que la séquence continue à tous les rappels qui peuvent être le suivant.

Il est possible que certains navigateurs ne soient pas compatibles avec la compression brotli. avant de renvoyer le fichier compressé en mode Brotli. Pour cela, 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".

Opération réussie. Vous avez utilisé la compression Brotli pour compresser davantage vos éléments.

Conclusion

Cet atelier de programmation a montré comment brotli peut réduire davantage l'utilisation la taille de l'image. Lorsqu'il est pris en charge, brotli est un algorithme de compression plus puissant que gzip