Alles, was Sie über JavaScript-Code-Splitting wissen müssen

Moderne Standorte kombinieren oft ihr ganzes JavaScript in ein einziges, großes, groß Main.js. Skript. Dies enthält regelmäßig die Skripts für alle Ihre Seiten oder Routen, auch wenn Benutzer nur einen kleinen Teil für die Seite benötigen, die sie anzeigen.

Wenn JavaScript auf diese Weise serviert wird, kann die Ladeleistung Ihrer Webseiten leiden - insbesondere mit sich anpassendes Webdesign auf mobilen Geräten. Lassen Sie es also feststellen, indem Sie JavaScript-Code-Splitting implementieren.

• So codieren Sie schneller, leichter JavaScript

Welches Problem hat Code aufteilen?

Wenn ein Webbrowser einen sieht & lt; script & gt; Es muss Zeit damit verbringen, das JavaScript herunterzuladen und zu verarbeiten, das Sie referenzieren. Dies kann sich schnell an High-End-Geräten fühlen, aber das Laden, Analysieren und Ausführen von nicht genutzten JavaScript-Code kann eine Weile in durchschnittlichen mobilen Geräten mit einem langsameren Netzwerk und langsameren CPU dauern. Wenn Sie sich je bei Coffee-Shop oder Hotel WiFi anmelden mussten, wissen Sie, dass langsame Netzwerkerlebnisse mit jedem passieren können.

Jede Sekunde, die auf Javascript wartet, um das Booten zu beenden, kann verzögern, wie bald Benutzer mit Ihrer Erfahrung interagieren können. Dies ist insbesondere der Fall, wenn Ihr UX auf JS für kritische Komponenten stützt oder sogar einfach Event-Handler für einfache UI-Stücke anbringt.

Muss ich mich mit Code aufteilen?

Es lohnt sich definitiv, sich selbst zu fragen, ob Sie codieren müssen (wenn Sie ein einfaches verwendet haben Webseitenersteller Sie wahrscheinlich nicht). Wenn Ihre Site JavaScript für interaktive Inhalte benötigt (für Funktionen wie Menüschubladen und Karussells) oder ist eine einseitige Anwendung, die sich auf JavaScript-Frameworks setzt, um UI zu rendern, um UI zu rendern, die Antwort ist wahrscheinlich "Ja". Ob die Codespaltung für Ihre Website lohnt, ist eine Frage, die Sie brauchen, um sich selbst zu beantworten. Sie verstehen Ihre Architektur und wie Ihre Website am besten lädt. Zum Glück stehen Tools zur Verfügung, um Ihnen hier zu helfen. Denken Sie daran, dass, wenn Sie Änderungen in Ihrem Design-System implementieren, diese Änderungen in Ihrem gemeinsam genutzten Speichern Cloud-Speicherung. Ihr Team kann also sehen.

Hilfe erhalten

Für diese neue für JavaScript-Code-Splitting Leuchtturm - Das Audits-Panel in Chrom-Entwickler-Tools - kann dazu beitragen, ein Licht darauf zu scheinen, ob dies ein Problem für Ihre Website ist. Die Prüfung, nach der Sie suchen möchten, ist die Verringerung der JavaScript-Ausführungszeit (dokumentiert) Hier ). Dieses Audit hebt alle Skripts auf Ihrer Seite hervor, die einen mit ihm interagierenden Benutzer verzögern können.

PageSpeed ​​Insights. ist ein Online-Tool, das auch die Leistung Ihres Standorts hervorheben kann - und enthält Labordaten von Leuchtturm und Real-World-Daten auf Ihre Site-Leistung aus dem Chrom-Benutzererfahrungsbericht. Ihre Web-Hosting Service kann andere Optionen haben.

Code-Abdeckung in Chromentwicklerwerkzeugen

Wenn es aussieht, als hätten Sie kostspielige Skripts, die besser aufgeteilt werden könnten, ist das nächste Tool, das Sie sehen, die Code-Deckungsfunktion in den CHROM-Entwickler-Tools (Devtools & GT; obere Rechts-Menü & GT; mehr Tools & GT; -Regements). Diese Maßnahmen, wie viel nicht verwendete JavaScript (und CSS) in Ihrer Seite ist. Für jedes gefragte Skript zeigt Devtools die "ungenutzten Bytes". Dies ist Code, den Sie in Betracht ziehen, und Lazy-Loading, wenn der Benutzer sie benötigt.

Die verschiedenen Arten von Codespalten

Es gibt einige verschiedene Ansätze, die Sie annehmen können, wenn es darum geht, JavaScript zu spalten. Wie viel diese für Ihre Website anwenden, neigt dazu, je nachdem, ob Sie Seiten- / Anwendungs-Logik 'logisch aufteilen oder Bibliotheken / Frameworks von anderen "Anbietern" aufteilen möchten.

Dynamische Code-Splitting: Viele von uns 'statisch' importieren JavaScript-Module und Abhängigkeiten, damit sie mit dem Bauzeit in eine Datei gebündelt werden. 'Dynamic' CODE-Splitting fügt die Möglichkeit hinzu, Punkte in Ihrem JavaScript zu definieren, die Sie in Ihrem JavaScript definieren möchten, und färben Sie die Last nach Bedarf. Modernes JavaScript verwendet die dynamische importieren() Erklärung, um dies zu erreichen. Wir werden dies kurz mehr abdecken.

Lieferantencode aufteilen: Die Frameworks und Bibliotheken, auf die Sie sich verlassen (z. B. reagieren, eckig, vue oder lodash), ändere sich wahrscheinlich nicht in den Skripts, die Sie an Ihre Benutzer senden, oft als "Logik" für Ihre Site. Um die negativen Auswirkungen von Cache-Ungültiger für Benutzer zu senken, um auf Ihre Website zurückzukehren, können Sie Ihre "Anbieter" in ein separates Skript aufteilen.

Einstiegs-Code-Splitting: Einträge sind Startpunkte in Ihrer Website oder in der App, dass ein Werkzeug wie WebPack, um Ihren Abhängigkeitsbaum aufzubauen. Das Aufteilen von Einträgen ist für Seiten nützlich, in denen die Client-Side-Routing nicht verwendet wird oder Sie sich auf eine Kombination aus Server- und Client-Seiten-Rendering verlassen.

Für unsere Zwecke in diesem Artikel konzentrieren wir uns auf dynamisches Code-Splitting.

Holen Sie sich die Hände mit dem Codespalten

Lassen Sie uns die JavaScript-Leistung von a optimieren Einfache Anwendung, der drei Zahlen sortiert Durch Code-Splitting - Dies ist eine App von meinem Kollegen Houssin Djirdeh. Der Workflow Wir verwenden, um unsere JavaScript-Last schnell zu gestalten, ist messen, optimieren und überwachen. Fang hier an .

Leistung messen

Bevor Sie versuchen, Optimierungen hinzuzufügen, werden wir zunächst die Leistung unseres Javascripts messen. Da die Magic Sorter-App auf PLITCH gehostet wird, verwenden wir ihre kodierende Umgebung. Hier geht es, wie man es geht:

• Klicken Sie auf die Schaltfläche Live anzeigen.
• Öffnen Sie die Devtools durch Drücken von CMD + Option + I / CTRL + Shift + I.
• Wählen Sie das Netzwerkfeld aus.
• Stellen Sie sicher, dass Cache deaktiviert wird, dass Cache geprüft wird, und die App neu laden.

Diese einfache Anwendung scheint 71,2 KB JavaScript zu verwenden, um nur einige Zahlen zu sortieren. Das scheint sicherlich nicht richtig zu sein. In unserer Quelle src / index.js. Die Lodash-Dienstprogrammbibliothek wird importiert und verwenden Sortieren nach - eine seiner Sortierdienstprogramme - um unsere Zahlen zu sortieren. Lodash bietet mehrere nützliche Funktionen an, aber die App verwendet nur eine einzige Methode davon. Es ist ein häufiger Fehler, um alle Abhängigkeit von Drittanbietern zu installieren und zu importieren, wenn Sie tatsächlich nur einen kleinen Teil davon verwenden müssen.

Optimieren Sie Ihr Bundle

Es gibt ein paar Möglichkeiten, um unsere JavaScript-Bündelgröße zu trimmen:

1. Schreiben Sie eine benutzerdefinierte Sortiermethode, anstatt sich auf eine ThirdParty-Bibliothek zu verlassen.
2. Benutzen Array.prototype.sort () , das in den Browser eingebaut ist.
3. Importieren Sie nur das Sortieren nach Methode von Lodash anstelle der gesamten Bibliothek.
4. Laden Sie den Code nur zum Sortieren herunter, wenn ein Benutzer sie benötigt (wenn sie auf eine Schaltfläche klicken).

Die Optionen 1 und 2 sind angemessen, um unsere Bündelgröße zu reduzieren - diese ergeben sich wahrscheinlich für eine echte Anwendung. Für Unterrichtszwecke versuchen wir etwas anderes. Die Optionen 3 und 4 helfen, die Leistung der Anwendung zu verbessern.

Importieren Sie nur den Code, den Sie benötigen

Wir ändern ein paar Dateien, um nur die Single zu importieren Sortieren nach Methode, die wir von Lodash benötigen. Beginnen wir mit dem Ersetzen unserer Lodash Abhängigkeit von package.json. :

"lodash": "^4.7.0",

mit diesem:

"lodash.sortby": "^4.7.0",

In SRC / Index.js Importieren wir dieses spezifischere Modul:

 js
Import "./style.css";
Import _ von "lodash";
Import Sortby von "Lodash.sortby"; 

Als Nächstes aktualisieren wir, wie die Werte sortiert werden:

 js
form.addeventListener ("Senden", E = & gt; {
  e.PreventDefault ();
  const-Werte = [input1.valueasnumber, input2.ValueasNumber, input3.ValueasNumber];
  const sortedvalues ​​= _.sortby (Werte);
  const sortiervalues ​​= sortby (Werte);
  Ergebnisse.innerHtml = `
    & lt; H2 & GT;
      $ {sortiervalues}
    & lt; / h2 & gt;
  `
}); 

Laden Sie die Zaubernummern-App neu, öffnen Sie Entwickler-Tools und schauen Sie sich das Netzwerkbereich erneut an. Für diese spezifische App wurde unsere Bündelgröße durch eine Skala von vier mit wenig Arbeit reduziert. Aber es gibt noch viel Platz zur Verbesserung.

JavaScript-Code-Splitting.

WebPack ist eines der beliebtesten JavaScript-Modulbundlers, das von Webentwicklern heute verwendet wird. Es ist 'bundles' (kombiniert) Alle Ihre Javascript-Module und andere Vermögenswerte in statische Dateien können Webbrowsern lesen.

Das einzelne Bundle in dieser Anwendung kann in zwei separate Skripts aufgeteilt werden:

• Einer ist dafür verantwortlich, dass der Code der Erstroute herstellt.
• Ein anderer enthält unser Sortiercode.

Mit dynamischen Importen (mit dem importieren() Keyword), ein zweites Skript kann auf Anfrage faul geladen werden. In unserer Zaubernummern-App kann der Code, der das Skript erstellt, nach Bedarf geladen werden, wenn der Benutzer auf die Schaltfläche klickt. Wir beginnen mit dem Entfernen des obersten Imports für die Sortiermethode in src / index.js. :

 Importieren von Sortby von "Lodash.sortby"; 

Importieren Sie es in den Ereignis-Listener, dass er feuert, wenn die Schaltfläche angeklickt wird:

form.addeventListener ("Senden", E = & gt; {
  e.PreventDefault ();
  Import ('lodash.sortby')
    . Dann (Modul = & gt; module.default)
    .hen (sortinput ())
    .Catch (ERR = & GT; {Alert (ERR)});
});

Diese dynamik importieren() Funktion, die wir verwenden, ist Teil eines Standardstrangvorschlags, einschließlich der Möglichkeit, ein Modul dynamisch im JavaScript-Sprachstandard zu importieren. WebPack unterstützt bereits diese Syntax. Sie können mehr darüber erfahren, wie dynamische Importe funktionieren In diesem Artikel .

Das importieren() Die Erklärung gibt ein Versprechen zurück, wenn er sich auflöst. WebPack hält dies als Split-Punkt an, dass es in ein separates Skript (oder ein Chunk) ausbricht. Sobald das Modul zurückgegeben wird, ist das Modul.default. wird verwendet, um den Standardausfuhr zu verweisen, der von bereitgestellt wurde Lodash . Das Versprechen wird mit einem anderen gekettet .dann() A. sortinput. Methode zur Sortierung der drei Eingabewerte. Am Ende der Versprechenkette, .Fang() wird aufgerufen, um zu handhaben, wo das Versprechen als Ergebnis eines Fehlers abgelehnt wird.

In realen Produktionsanwendungen sollten Sie dynamische Importfehler entsprechend umgehen. Einfache Benachrichtigungsnachrichten (ähnlich wie hier) sind das, was verwendet wird, und bieten möglicherweise nicht die beste Benutzererfahrung, um Benutzer zu wissen, dass etwas schief gelaufen ist.

Falls Sie einen spleißenden Fehler wie "Parsing-Fehler: Import und Export sehen, darf nur auf der obersten Ebene angezeigt werden, wissen Sie, dass dies auf die dynamische Importsyntax zurückzuführen ist, die noch nicht abgeschlossen ist. Obwohl WebPack es unterstützt, wurden die Einstellungen für ESLINT (ein JavaScript-Hotftool), die von PLITch verwendet werden, nicht aktualisiert wurden, um diese Syntax noch aufzunehmen, aber es funktioniert immer noch.

Das letzte, was wir tun müssen, ist, das zu schreiben sortinput. Methode am Ende unserer Datei. Dies muss eine Funktion sein, die eine Funktion zurückgibt, die die importierte Methode anzieht lodash.sortby. . Die verschachtelte Funktion kann die drei Eingabewerte sortieren und das DOM aktualisieren:

 const sortinput = () = & gt; {
  Rückkehr (sortby) = & gt; {
    const Werte = [
      input1.ValueasNumber,
      input2.ValueasNumber,
      input3.ValueasNumber.
    ];
    const sortiervalues ​​= sortby (Werte);
    Ergebnisse.innerHtml = `
      & lt; H2 & GT;
        $ {sortiervalues}
      & lt; / h2 & gt;
    `
  };
} 

Überwachen Sie die Zahlen

Lassen Sie uns nun die Anwendung ein letztes Mal neu laden und das Netzwerkfeld nähern. Sie sollten feststellen, wie nur ein kleines Erstbündel heruntergeladen wird, wenn die App lädt. Nachdem die Taste angeklickt ist, um die Eingabennummern zu sortieren, wird das Skript / Chunk, das den Sortiercode enthält, abgerufen und ausgeführt. Sehen Sie, wie die Zahlen noch sortiert werden, da wir sie erwarten würden?

JavaScript-Code-Splitting und Lazy-Loading können sehr nützlich sein, um die erste Bündelgröße Ihrer App oder der Site herunterzulassen. Dies kann direkt zu schnelleren Seitenlastzeiten für Benutzer führen. Obwohl wir uns das Hinzufügen von Code auf eine Vanille-JavaScript-Anwendung angesehen haben, können Sie es auch auf Apps anwenden, die mit Bibliotheken oder Frameworks aufgebaut sind.

Lazy-Loading mit einer JavaScript-Bibliothek oder einem Rahmen

Viele beliebte Frameworks unterstützen das Hinzufügen von Code-Splitting und Lazy-Load mit dynamischen Importen und WebPack.

So können Sie einen Film-Bauteil "Beschreibung" mit Reaktion (mit Reagieren.lazy () und ihr Suspense-Feature), um ein "Loading ..." -Mintback bereitzustellen, während die Komponente lazy-geladen ist (siehe Hier Für einige weitere Details):

 Import reagieren, {Spannung} von 'reagieren';
constricity = reacy.lazy (() = & gt; Import ('./ Beschreibung'));
Funktion App () {
  Rückkehr (
    & lt; div & gt;
      & lt; H1 & GT; mein Film & lt; / h1 & gt;
      & lt; Suspense Fallback = "Laden ..." & Gt;
        & lt; Beschreibung / & gt;
      & lt; / suspen & gt;
    & lt; / div & gt;
  );
} 

Code-Splitting kann dazu beitragen, die Auswirkungen von JavaScript auf Ihre Benutzererfahrung zu senken. Betrachten Sie es definitiv, wenn Sie größere JavaScript-Bündel haben und im Zweifelsfall nicht vergessen, nicht zu messen, zu optimieren und zu überwachen.

Dieser Artikel wurde ursprünglich in Ausgabe 317 von veröffentlicht Netz Das weltweit meistverkaufte Magazin für Webdesigner und Entwickler. AUSGABE KAUFEN 317 Hier oder Abonnieren Sie hier .

Zum Thema passende Artikel:

• 9 der besten Javascript-Frameworks
• 15 Wesentliche JavaScript-Tools, die Sie verwenden sollten
• 14 der besten JavaScript-APIs