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.
Messen
Wie immer ist es wichtig, zuerst die Leistung einer Website zu messen, und versuchen, Optimierungen hinzuzufügen.
- Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen. Drücken Sie dann
Vollbild
- Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Option + J“ auf einem Mac), um die Entwicklertools zu öffnen.
- Klicken Sie auf den Tab Netzwerk.
- Klicken Sie das Kästchen Cache deaktivieren an.
- Aktualisieren Sie die App.
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:
- Benutzerdefinierte Sortiermethode schreiben, anstatt eine Bibliothek eines Drittanbieters zu importieren
- Verwenden Sie die integrierte
Array.prototype.sort()-Methode, um numerisch zu sortieren - Importieren Sie nur die Methode
sortByauslodashund nicht aus der gesamten Bibliothek. - 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.
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.
Nach dem Drücken der Schaltfläche zum Sortieren der eingegebenen Nummern wird der Block, der wird der Sortiercode abgerufen und ausgeführt.
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