JavaScript-Nutzlasten durch Codeaufteilung reduzieren

Die meisten Webseiten und Anwendungen bestehen aus vielen verschiedenen Teilen. Anstelle von dass der gesamte JavaScript-Code für die Anwendung gesendet wird, wird der JavaScript-Code in mehrere Blöcke aufgeteilt. verbessert die Seitenleistung.

In diesem Codelab erfahren Sie, wie Sie mithilfe der Codeaufteilung die Leistung eines Anwendung, die drei Zahlen sortiert.

Ein Browserfenster zeigt eine Anwendung mit dem Titel „Magic Sorter“ mit drei Feldern zur Eingabe von Zahlen und einer Sortierschaltfläche.

Messen

Wie immer ist es wichtig, zuerst die Leistung einer Website zu messen, und versuchen, Optimierungen hinzuzufügen.

  1. Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen. Drücken Sie dann Vollbild Vollbild
  2. Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Option + J“ auf einem Mac), um die Entwicklertools zu öffnen.
  3. Klicken Sie auf den Tab Netzwerk.
  4. Klicken Sie das Kästchen Cache deaktivieren an.
  5. Aktualisieren Sie die App.

Netzwerkbereich mit einem 71,2 KB-JavaScript-Bundle.

71,2 KB JavaScript, um ein paar Zahlen in einer einfachen Anwendung zu sortieren. What gives?

Im Quellcode (src/index.js) wird die Bibliothek lodash importiert und verwendet in dieser Anwendung. Lodash bietet viele nützliche Funktionen -Funktionen, aber hier wird nur eine Methode aus dem Paket verwendet. Das Installieren und Importieren kompletter Abhängigkeiten von Drittanbietern, bei denen nur dass ein Teil davon genutzt wird, ist ein häufiger Fehler.

Optimieren

Es gibt mehrere Möglichkeiten, die Größe des Sets zu kürzen:

  1. Benutzerdefinierte Sortiermethode schreiben, anstatt eine Bibliothek eines Drittanbieters zu importieren
  2. Verwenden Sie die integrierte Array.prototype.sort()-Methode, um numerisch zu sortieren
  3. Importieren Sie nur die Methode sortBy aus lodash und nicht aus der gesamten Bibliothek.
  4. Code für die Sortierung nur herunterladen, wenn der Nutzer auf die Schaltfläche klickt

Die Optionen 1 und 2 sind perfekt geeignet, um die Bundle-Größe zu reduzieren für eine echte Anwendung wahrscheinlich am sinnvollsten sind). Dies sind jedoch wird in dieser Anleitung nicht zum Unterrichten verwendet 😈.

Sowohl die Optionen 3 als auch 4 tragen zur Verbesserung der Leistung dieser Anwendung bei. Die In den nächsten Abschnitten dieses Codelabs werden diese Schritte behandelt. Wie bei jeder Programmierung versuchen Sie immer, den Code selbst zu schreiben, anstatt ihn zu kopieren und einzufügen.

Nur benötigte Elemente importieren

Einige Dateien müssen geändert werden, um nur eine Methode aus lodash zu importieren. Ersetzen Sie zuerst diese Abhängigkeit in package.json:

"lodash": "^4.7.0",

durch:

"lodash.sortby": "^4.7.0",

Importieren Sie jetzt in src/index.js dieses Modul:

import "./style.css";
import _ from "lodash";
import sortBy from "lodash.sortby";

Und aktualisieren Sie die Sortierung der Werte:

form.addEventListener("submit", e => {
  e.preventDefault();
  const values = [input1.valueAsNumber, input2.valueAsNumber, input3.valueAsNumber];
  const sortedValues = _.sortBy(values);
  const sortedValues = sortBy(values);

  results.innerHTML = `
    <h2>
      ${sortedValues}
    </h2>
  `
});

Aktualisieren Sie die Anwendung, öffnen Sie die Entwicklertools und sehen Sie sich den Bereich Netzwerk an. noch einmal.

Netzwerkbereich mit einem 15,2 KB-JavaScript-Bundle.

Für diese Anwendung wurde die Paketgröße mit nur sehr geringen aber es gibt noch Verbesserungspotenzial.

Codeaufteilung

webpack ist eines der beliebtesten Open-Source- Module-Bundler. Kurz gesagt: Es bündelt alle JavaScript-Module (so und anderen Assets), die eine Webanwendung in statische Dateien umwandeln, vom Browser gelesen werden kann.

Das in dieser Anwendung verwendete Bundle kann in zwei separate Teile:

  • Einer, der für den Code verantwortlich ist, aus dem unsere erste Route besteht
  • Sekundärer Block, der den Sortiercode enthält

Mit dynamischen Importen kann ein sekundärer Chunk Lazy Loading verwendet werden. kann bei Bedarf abgerufen werden. In dieser Anwendung kann der Code, aus dem der Chunk besteht, wenn der Nutzer auf die Schaltfläche drückt.

Entfernen Sie zuerst den Import der obersten Ebene für die Sortiermethode in src/index.js:

import sortBy from "lodash.sortby";

Importieren Sie es in den Event-Listener, der beim Drücken der Schaltfläche ausgelöst wird:

form.addEventListener("submit", e => {
  e.preventDefault();
  import('lodash.sortby')
    .then(module => module.default)
    .then(sortInput())
    .catch(err => { alert(err) });
});

Die Funktion import() ist Teil eines Angebot (derzeit in der Phase 3 des TC39-Prozesses), um die Möglichkeit zum dynamischen Importieren eines Moduls zu bieten. Webpack unterstützt dies bereits und folgt derselben Syntax. durch das Angebot zu ermitteln.

import() gibt ein Promise zurück. Wenn es aufgelöst wird, wird das ausgewählte Modul bereitgestellt, das in einen separaten Block aufgeteilt ist. Nachdem das Modul zurückgegeben wird, wird module.default verwendet, um auf den Standardwert Export bereitgestellt von lodash. Das Versprechen ist mit einem anderen .then verkettet, das eine sortInput-Methode zum Sortieren der drei Eingabewerte aufruft. Am Ende des Versprechenskettecatch() wird für Fälle verwendet, in denen das Versprechen abgelehnt wird weil ein Fehler aufgetreten ist.

Als Letztes müssen Sie die Methode sortInput an der Ende der Datei. Dabei muss es sich um eine Funktion handeln, die eine Funktion zurückgibt, die übernimmt die importierte Methode aus lodash.sortBy. Die verschachtelte Funktion kann dann die drei Eingabewerte sortieren und das DOM aktualisieren.

const sortInput = () => {
  return (sortBy) => {
    const values = [
      input1.valueAsNumber,
      input2.valueAsNumber,
      input3.valueAsNumber
    ];
    const sortedValues = sortBy(values);

    results.innerHTML = `
      <h2>
        ${sortedValues}
      </h2>
    `
  };
}

Überwachen

Aktualisieren Sie die Anwendung ein letztes Mal und behalten Sie das Netzwerk genau im Auge. noch einmal. Nur ein kleines anfängliches Bundle wird heruntergeladen, sobald die App geladen wird.

Netzwerkbereich mit einem 2,7 KB-JavaScript-Bundle.

Nach dem Drücken der Schaltfläche zum Sortieren der eingegebenen Nummern wird der Block, der wird der Sortiercode abgerufen und ausgeführt.

Netzwerkbereich mit einem 2,7 KB-JavaScript-Bundle gefolgt von einem 13,9 KB-JavaScript-Bundle.

Beachten Sie, wie die Zahlen immer noch sortiert werden!

Fazit

Codeaufteilung und Lazy Loading können äußerst nützliche Techniken sein, der anfänglichen Paketgröße Ihrer Anwendung. Dies kann direkt zu deutlich kürzere Seitenladezeiten. Es gibt jedoch einige wichtige Dinge, berücksichtigt werden, bevor Sie diese Optimierung in Ihre Anwendung aufnehmen.

Lazy Loading

Beim Lazy Loading bestimmter Codemodule ist es wichtig, zu berücksichtigen, Nutzer mit schwächeren Netzwerkverbindungen. Aufteilung und wenn ein sehr großer Code-Chunk geladen wird, wenn ein Nutzer eine Aktion sendet, Es scheint, als ob die App nicht mehr funktioniert. Daher sollten Sie eine Ladeindikators irgendwie angezeigt.

Lazy Loading von Modulen für Drittanbieterknoten

Dies ist nicht immer der beste Ansatz zum Lazy Loading von Drittanbieterabhängigkeiten in Ihren und das hängt davon ab, wo Sie sie verwenden. Normalerweise Abhängigkeiten in ein separates vendor-Bundle aufgeteilt, das aus folgendem Grund im Cache gespeichert werden kann: nicht so oft aktualisiert. Weitere Informationen zum SplitChunksPlugin kann die Ihnen dabei helfen.

Lazy Loading mit einem JavaScript-Framework

Viele beliebte Frameworks und Bibliotheken, die Webpack verwenden, bieten Abstraktionen für ist Lazy Loading im Vergleich zu dynamischen Importen mitten im .

Auch wenn es hilfreich ist, zu verstehen, wie dynamische Importe funktionieren, sollten Sie immer die Methode Methode, die von Ihrem Framework/Ihrer Bibliothek empfohlen wird, um bestimmte Module per Lazy Loading zu laden.

Vorabladen und Vorabruf

Nutzen Sie nach Möglichkeit Browserhinweise wie <link rel="preload">. oder <link rel="prefetch">, um wichtige Module noch früher. Webpack unterstützt beide Hinweise durch die Verwendung von magischen Kommentaren beim Import Aussagen. Dies wird ausführlicher in der Leitfaden zum Vorabladen kritischer Blöcke.

Lazy Loading – mehr als Code

Bilder können einen wichtigen Teil einer App ausmachen. Lazy Loading für diejenigen, „below the fold“ (mit Scrollen sichtbar) oder außerhalb des Darstellungsbereichs des Geräts liegen, kann dies die Website beschleunigen. Gelesen mehr dazu im Leitfaden zu Lazysizes