Netzwerknutzlasten mit gzip reduzieren und komprimieren

Houssein Djirdeh

In diesem Codelab erfahren Sie, wie Sie JavaScript-Code Bundle für die folgende Anwendung verbessert die Seitenleistung, indem der Anfragegröße der App.

Messen

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

• Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen. Drücken Sie dann Vollbild

Diese App, die auch unter Nicht verwendete Apps entfernen code" Codelab, mit dem Sie für Ihren Favoriten abstimmen können. Kätzchen. 🐈

Sehen wir uns nun an, wie groß diese Anwendung ist:

1. Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Option + J“ auf einem Mac), um die Entwicklertools zu öffnen.
2. Klicken Sie auf den Tab Netzwerk.
3. Klicken Sie das Kästchen Cache deaktivieren an.
4. Aktualisieren Sie die App.

Obwohl bei der Abfrage Nicht verwendeten Code entfernen große Fortschritte gemacht wurden, Codelab kürzen können. 225 KB ist immer noch ziemlich groß.

Minimierung

Betrachten Sie den folgenden Codeblock.

function soNice() {
  let counter = 0;

  while (counter < 100) {
    console.log('nice');
    counter++;
  }
}

Wird diese Funktion in einer eigenen Datei gespeichert, beträgt die Dateigröße bei 112 B (Byte):

Wenn alle Leerzeichen entfernt werden, sieht der resultierende Code so aus:

function soNice(){let counter=0;while(counter<100){console.log("nice");counter++;}}

Die Dateigröße würde nun etwa 83 B betragen. Wenn sie durch die Reduzierung und einige Ausdrücke ändern, kann der endgültige Code sieht am Ende so aus:

function soNice(){for(let i=0;i<100;)console.log("nice"),i++}

Die Dateigröße erreicht jetzt 62 B.

Mit jedem Schritt wird der Code schwieriger zu lesen. Die Einstellungen des Browsers Die JavaScript-Engine interpretiert beide auf die gleiche Weise. Die Der Vorteil der Verschleierung von Code auf diese Weise kann dazu beitragen, Größen. 112 B war eigentlich nicht viel für den Anfang, aber es gab immer noch 50% die Größe reduziert!

In dieser Anwendung wird webpack Version 4 als Module Bundler. Die jeweilige Version finden Sie unter package.json.

"devDependencies": {
  //...
  "webpack": "^4.16.4",
  //...
}

Version 4 reduziert das Bundle bereits standardmäßig im Produktionsmodus. Sie verwendet TerserWebpackPlugin ist ein Plug-in für Terser. Terser ist ein beliebtes Tool zur Komprimierung von JavaScript-Code.

Um eine Vorstellung davon zu erhalten, wie der komprimierte Code aussieht, klicken Sie auf main.bundle.js, während du dich noch im Bereich Netzwerk der Entwicklertools befindest. Klicken Sie nun auf das Antwort.

Der Code wird in seiner endgültigen Form, reduziert und manipuliert, im Antworttext angezeigt. Wenn Sie wissen möchten, wie groß das Bundle möglicherweise gewesen wäre, wenn es nicht minimiert wurde, öffnen Sie webpack.config.js und aktualisieren Sie die mode-Konfiguration.

module.exports = {
  mode: 'production',
  mode: 'none',
  //...

Aktualisieren Sie die Anwendung und prüfen Sie die Bundle-Größe erneut über die Bereich Netzwerk in den Entwicklertools

Das ist ein ziemlich großer Unterschied! 😅

Machen Sie die Änderungen hier rückgängig, bevor Sie fortfahren.

module.exports = {
  mode: 'production',
  mode: 'none',
  //...

Das Einbinden eines Prozesses zum Komprimieren von Code in Ihrer Anwendung hängt von den Tools ab die Sie verwenden:

• Bei Verwendung von Webpack v4 oder höher müssen Sie nichts weiter tun. da Code im Produktionsmodus standardmäßig reduziert wird. 👍
• Wenn eine ältere Version des Webpacks verwendet wird, installiere und füge TerserWebpackPlugin hinzu in den Webpack-Build-Prozess eingebunden. In der Dokumentation wird dies ausführlich erläutert.
• Es gibt auch andere Reduzierungs-Plug-ins, die verwendet werden können. z. B. BabelMinifyWebpackPlugin und ClosureCompilerPlugin.
• Wenn kein Module Bundler verwendet wird, nutzen Sie Terser. oder direkt als Abhängigkeit einfügen.

Komprimierung

Obwohl der Begriff "Komprimierung" wird manchmal locker verwendet, um zu erklären, wie Code während des Komprimierungsvorgangs reduziert wird, wird er im eigentlichen wörtlich zu verstehen.

Bei der Komprimierung handelt es sich in der Regel um Code, der mithilfe einer Datenkomprimierung geändert wurde. Komprimierungsalgorithmus. Anders als bei der Komprimierung, gültigen Code zu verwenden, muss der komprimierte Code dekomprimiert werden, bevor er verwendet werden kann.

Bei jeder HTTP-Anfrage und -Antwort können Browser und Webserver headers, die enthalten sein sollen zusätzliche Informationen zum abgerufenen oder empfangenen Asset. Dabei kann es sich um auf dem Tab „Headers“ im Bereich „Network“ der Entwicklertools angezeigt, wo drei Typen werden angezeigt:

• General steht für allgemeine Header, die für die gesamte Anfrageantwort relevant sind. Interaktion.
• Response Headers (Antwortheader) enthält eine Liste von Headern, die für die tatsächliche Antwort spezifisch sind. vom Server.
• Request Headers zeigt eine Liste der Header an, die der Anfrage vom Client.

Sehen Sie sich die accept-encoding-Kopfzeile in Request Headers an.

accept-encoding wird vom Browser verwendet, um anzugeben, welche Inhalte Codierungsformaten oder Komprimierungsalgorithmen, die sie unterstützt. Es gibt viele Textkomprimierungsalgorithmen. Es gibt jedoch nur drei hier für die Komprimierung (und Dekomprimierung) von HTTP-Netzwerkanfragen unterstützt:

• Gzip (gzip): Die am häufigsten verwendete Komprimierungssoftware. Format für Server- und Clientinteraktionen. Sie baut auf dem Deflate auf und wird von allen aktuellen Browsern unterstützt.
• Deflate (deflate): Nicht häufig verwendet.
• Brotli (br): Eine neuere Komprimierung Algorithmus, mit dem die Kompressionsverhältnisse weiter verbessert werden sollen. um die Seitenladezeiten zu verkürzen. Sie wird im der meisten Browser aktualisieren

Die Beispielanwendung in dieser Anleitung ist mit der App identisch, die im "Nicht verwendeten Code entfernen", mit dem Unterschied, dass Als Server-Framework wird jetzt Express verwendet. Im nächsten sowohl die statische als auch die dynamische Komprimierung.

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

• Dateien auf höheren Ebenen komprimieren, um bessere Komprimierungsverhältnisse zu erzielen 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.

const express = require('express');

const app = express();

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

const 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/-Verzeichnis (und diese Dateien werden mit jedem Build von Webpack erstellt).

Damit alle Assets bei jeder Anfrage komprimiert werden, compression-Middleware-Bibliothek verwendet werden können. Fügen Sie es zuerst als devDependency in package.json hinzu:

"devDependencies": {
  //...
  "compression": "^1.7.3"
},

Importieren Sie es in die Serverdatei server.js:

const express = require('express');
const compression = require('compression');

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

//...

const app = express();

app.use(compression());

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

//...

Aktualisieren Sie nun die App und sehen Sie sich im Bereich Netzwerk die Bundle-Größe an.

Von 225 KB auf 61,6 KB! Im Response Headers Now ist ein content-encoding zeigt an, dass der Server diese mit gzip codierte Datei heruntersendet.

Statische Komprimierung

Der Grundgedanke hinter der statischen Komprimierung besteht darin, im Voraus zu prüfen.

Vorteile

• Die Latenz aufgrund der hohen Komprimierungsstufen spielt keine Rolle mehr. Die Komprimierung von Dateien muss nicht spontan erfolgen, da sie jetzt direkt 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 die Dateien im Voraus komprimiert werden, Einstellungen so geändert werden, dass Assets im Rahmen des Build-Schritts komprimiert werden. CompressionPlugin die dafür verwendet werden können.

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

"devDependencies": {
  //...
  "compression-webpack-plugin": "^1.1.11"
},

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

const path = require("path");

//...

const CompressionPlugin = require("compression-webpack-plugin");

Fügen Sie es außerdem in das Array plugins ein:

module.exports = {
  //...
  plugins: [
    //...
    new CompressionPlugin()
  ]
}

Das Plug-in komprimiert die Build-Dateien standardmäßig mit gzip. Jetzt ansehen in der Dokumentation um zu erfahren, wie Sie Optionen hinzufügen, um einen anderen Algorithmus zu verwenden oder bestimmte Dateien.

Wenn die App neu geladen und neu erstellt wird, wird eine komprimierte Version des Haupt-Bundles erstellt haben. Öffne die Glitch-Konsole, um dir den Inhalt des Das letzte public/-Verzeichnis, das vom Knotenserver bereitgestellt wird.

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

cd public
ls

Die mit gzip komprimierte Version des Bundles, main.bundle.js.gz, wird jetzt hier gespeichert: gut. CompressionPlugin komprimiert index.html außerdem standardmäßig.

Als Nächstes muss der Server angewiesen werden, die gzip-Dateien wenn ihre ursprünglichen JS-Versionen angefordert werden. Dies können Sie tun, Durch Definieren einer neuen Route in server.js, bevor die Dateien mit bereitgestellt werden express.static.

const express = require('express');
const app = express();

app.get('*.js', (req, res, next) => {
  req.url = req.url + '.gz';
  res.set('Content-Encoding', 'gzip');
  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 .gz an die URL der Anfrage angehängt und der Der Antwortheader Content-Encoding ist auf gzip festgelegt.
• Schließlich sorgt next() dafür, dass die Sequenz an jedem Callback weitergeführt wird. was als Nächstes kommen könnte.

Sehen Sie sich nach dem Aktualisieren der App noch einmal den Bereich Network an.

Wie zuvor wurde die Paketgröße deutlich reduziert.

Fazit

In diesem Codelab wurde das Komprimieren und Komprimieren von Quellcode behandelt. Beide Methoden werden in vielen Tools zum Standard der heute verfügbar ist, daher müssen Sie herausfinden, ob Ihre Toolchain bereits verfügbar ist, unterstützt werden oder Sie selbst beide Verfahren anwenden sollten.