Netzwerknutzlasten mit Brotli reduzieren und komprimieren

Michael DiBlasio

Dieses Codelab ist eine Erweiterung des Moduls Netzwerknutzlasten reduzieren und komprimieren Codelab und setzt voraus, dass Sie mit den Grundlagen der Komprimierung vertraut sind. Als im Vergleich zu anderen Komprimierungsalgorithmen wie gzip Mit der Brotli-Komprimierung lassen sich die Komprimierungsverhältnisse und die Gesamtheit der App Größe.

Messen

Bevor Sie Optimierungen vornehmen, sollten Sie den aktuellen Status der Anwendung.

1. Klicke auf Zum Bearbeiten Remix, damit das Projekt bearbeitet werden kann.
2. Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen. Drücken Sie dann Vollbild

Im vorherigen Abschnitt Netzwerknutzlasten reduzieren und komprimieren Codelab und haben wir die Größe von main.js von 225 KB auf 61,6 KB reduziert. In diesem Codelab erfahren Sie, wie Sie mit der Brotli-Komprimierung diese Bundle-Größe noch weiter reduzieren können.

Brotli-Komprimierung

Brotli ist ein neuerer Komprimierungsalgorithmus, der eine noch bessere Textkomprimierung ermöglicht. Ergebnisse als gzip. Gemäß den CertSimple, Leistung von Brotli:

• 14% kleiner als gzip bei JavaScript
• 21% kleiner als gzip bei HTML
• 17% kleiner als gzip für Preisvergleichsportale

Damit Sie Brotli verwenden können, muss Ihr Server HTTPS unterstützen. Brotli wird in der der meisten Browser aktualisieren Browser zur Unterstützung von Brotli enthält br in Accept-Encoding-Headern:

Accept-Encoding: gzip, deflate, br

Über Content-Encoding können Sie festlegen, welcher Komprimierungsalgorithmus verwendet wird. auf dem Tab "Netzwerk" der Chrome-Entwicklertools (Command+Option+I oder Ctrl+Alt+I):

Brotli aktivieren

Dynamische Komprimierung

Bei der dynamischen Komprimierung werden Assets automatisch die vom Browser angefordert werden.

Vorteile

• Das Erstellen und Aktualisieren von gespeicherten komprimierten Versionen von Assets ist fertig.
• Die spontane Komprimierung funktioniert besonders gut bei Webseiten, dynamisch generiert werden.

Nachteile

• Das Komprimieren von Dateien auf höherer Ebene für bessere Komprimierungsverhältnisse dauert länger dauert. Das kann zu Leistungseinbußen führen, weil der Nutzer darauf wartet, dass die Assets bevor sie vom Server gesendet werden.

Dynamische Komprimierung mit Node/Express

Die Datei server.js ist für die Einrichtung des Knotenservers verantwortlich, der hostet der Anwendung.

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);
});

Derzeit können nur express importiert und die express.static verwendet werden. um alle statischen HTML-, JS- und CSS-Dateien im public/directory (und diese Dateien werden mit jedem Build von Webpack erstellt).

Um sicherzustellen, dass alle Assets bei jedem Erstellen mit Brotli komprimiert werden angefordert, wird die shrink-ray -Modul verwendet werden kann. Fügen Sie es zuerst als devDependency in package.json hinzu:

"devDependencies": {
  //...
  "shrink-ray": "^0.1.3"
},

Importieren Sie es in die Serverdatei server.js:

var express = require('express');
var shrinkRay = require('shrink-ray');

Fügen Sie sie als Middleware hinzu, bevor express.static bereitgestellt wird:

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

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

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

Aktualisieren Sie nun die App und sehen Sie sich im Steuerfeld „Netzwerk“ die Bundle-Größe an:

Sie sehen jetzt im Content-Encoding-Header, dass brotli von bz angewendet wird. main.bundle.js wurde von 225 KB auf 53,1 KB reduziert! Das ist ca. 14% kleiner im Vergleich zu gzip (61,6 KB).

Statische Komprimierung

Der Grundgedanke hinter der statischen Komprimierung besteht darin, die Assets vorab zu komprimieren und zu speichern. der Zeit.

Vorteile

• Die Latenz aufgrund der hohen Komprimierungsstufen spielt keine Rolle mehr. Nichts Dateien müssen spontan komprimiert werden, da sie jetzt abgerufen werden können. .

Nachteile

• Assets müssen bei jedem Build komprimiert werden. Bauzeiten können länger dauern bei hoher Komprimierung.

Statische Komprimierung mit Node/Express und Webpack

Da bei der statischen Komprimierung Dateien im Voraus komprimiert werden, Einstellungen so geändert werden, dass Assets im Rahmen des Build-Schritts komprimiert werden. Die Hierfür kann brotli-webpack-plugin verwendet werden.

Fügen Sie es zuerst als devDependency in package.json hinzu:

"devDependencies": {
  //...
 "brotli-webpack-plugin": "^1.1.0"
},

Importieren Sie es wie jedes andere Webpack-Plug-in in die Konfigurationsdatei, webpack.config.js:

var path = require("path");

//...
var BrotliPlugin = require('brotli-webpack-plugin');

Fügen Sie es in das Plug-in-Array ein:

module.exports = {
  // ...
  plugins: [
    // ...
    new BrotliPlugin({
      asset: '[file].br',
      test: /\.(js)$/
    })
  ]
},

Das Plug-in-Array verwendet die folgenden Argumente:

• asset: Der Name des Ziel-Assets.
• [file] wird durch den Dateinamen des ursprünglichen Assets ersetzt.
• test: Alle Assets, die diesem Regex entsprechen (d. h. JavaScript-Assets mit den Endziffern .js) verarbeitet wurden.

main.js wird beispielsweise in main.js.br umbenannt.

Wenn die App neu geladen und neu erstellt wird, wird eine komprimierte Version des Haupt-Bundles erstellt haben. Öffne die Glitch-Konsole, um zu sehen, was in der finalen Das Verzeichnis public/, das vom Knotenserver bereitgestellt wird.

1. Klicken Sie auf die Schaltfläche Tools.
2. Klicken Sie auf die Schaltfläche Console.
3. Führen Sie in der Console die folgenden Befehle aus, um zum public zu wechseln. und alle zugehörigen Dateien ansehen:

cd public
ls -lh

Die komprimierte Brotli-Version des Bundles, main.bundle.js.br, wurde jetzt gespeichert und ist ~76% kleiner (225 KB gegenüber 53 KB) als main.bundle.js.

Weisen Sie als Nächstes den Server an, diese mit Brotli komprimierten Dateien jedes Mal zu senden, wenn seine JS-Originalversionen werden angefordert. Dazu definieren Sie einfach eine neue in server.js, bevor die Dateien mit express.static bereitgestellt werden.

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'));

Mit app.get wird dem Server mitgeteilt, wie er auf eine GET-Anfrage für ein Endpunkt verwendet wird. Über eine Callback-Funktion wird dann definiert, wie dies Die Route funktioniert so:

• Wenn Sie '*.js' als erstes Argument angeben, bedeutet dies, dass dies für alle der zum Abrufen einer JS-Datei ausgelöst wird.
• Im Callback wird .br an die URL der Anfrage angehängt und der Der Antwortheader Content-Encoding ist auf br festgelegt.
• Der Header Content-Type wird auf application/javascript; charset=UTF-8 gesetzt, MIME-Typ angeben.
• Schließlich sorgt next() dafür, dass die Sequenz zu jedem Callback fortgeführt wird, der möglicherweise als Nächstes.

Da einige Browser die Brotli-Komprimierung möglicherweise nicht unterstützen, vergewissern Sie sich, dass die Brotli-Komprimierung bevor die mit Brotli komprimierte Datei zurückgegeben wird. Überprüfen Sie dazu den Der Accept-Encoding-Anfrageheader enthält 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'));

Werfen Sie nach dem Aktualisieren der App noch einmal einen Blick auf das Steuerfeld „Netzwerk“.

Fertig! Sie haben Ihre Assets mit der Brotli-Komprimierung weiter komprimiert.

Fazit

In diesem Codelab wurde veranschaulicht, wie brotli die Gesamtzahl deiner App-Assets Größe. Sofern unterstützt, ist brotli ein leistungsstärkerer Komprimierungsalgorithmus als gzip.