Alles, was Sie über das Aufteilen von JavaScript-Code wissen müssen
Moderne Websites kombinieren häufig ihr gesamtes JavaScript zu einem einzigen, großen main.js Skript. Diese enthält regelmäßig die Skripte 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 bereitgestellt wird, kann die Ladeleistung Ihrer Webseiten beeinträchtigt werden - insbesondere bei sich anpassendes Webdesign auf mobilen Geräten. Beheben wir das Problem, indem wir die Aufteilung des JavaScript-Codes implementieren.
- So codieren Sie schneller und leichter JavaScript
Welches Problem löst die Codeaufteilung?
Wenn ein Webbrowser a sieht Das Herunterladen und Verarbeiten des JavaScript, auf das Sie verweisen, muss einige Zeit in Anspruch nehmen. Dies kann sich auf High-End-Geräten schnell anfühlen, aber das Laden, Parsen und Ausführen von nicht verwendetem JavaScript-Code kann bei durchschnittlichen Mobilgeräten mit einem langsameren Netzwerk und einer langsameren CPU eine Weile dauern. Wenn Sie sich jemals bei einem Café oder Hotel-WLAN anmelden mussten, wissen Sie, dass jedem langsame Netzwerkerfahrungen passieren können.
Jede Sekunde, die Sie auf JavaScript warten, um den Startvorgang abzuschließen, kann verzögern, wie schnell Benutzer mit Ihrer Erfahrung interagieren können. Dies ist insbesondere dann der Fall, wenn Ihre UX für kritische Komponenten auf JS angewiesen ist oder nur Ereignishandler für einfache Teile der Benutzeroberfläche anfügt.
Muss ich mich um die Code-Aufteilung kümmern?
Es lohnt sich auf jeden Fall, sich zu fragen, ob Sie Code-Split benötigen (wenn Sie eine einfache verwendet haben Webseitenersteller Sie wahrscheinlich nicht). Wenn Ihre Website JavaScript für interaktive Inhalte benötigt (für Funktionen wie Menüschubladen und Karussells) oder eine einseitige Anwendung ist, die JavaScript-Frameworks zum Rendern der Benutzeroberfläche verwendet, lautet die Antwort wahrscheinlich 'Ja'. Ob sich die Aufteilung von Code für Ihre Site lohnt, müssen Sie selbst beantworten. Sie verstehen Ihre Architektur und wissen, wie Ihre Site am besten geladen wird. Zum Glück stehen Ihnen hier Tools zur Verfügung. Denken Sie daran, dass Sie diese Änderungen in Ihrer Freigabe speichern, wenn Sie Änderungen in Ihrem Entwurfssystem implementieren Cloud-Speicher damit Ihr Team sehen kann.
Hilfe erhalten
Für diejenigen, die neu in der JavaScript-Code-Aufteilung sind, Leuchtturm - Das Audits-Bedienfeld in den Chrome Developer Tools - kann Ihnen dabei helfen, herauszufinden, ob dies ein Problem für Ihre Website ist. Das Audit, nach dem Sie suchen möchten, lautet Reduzieren der JavaScript-Ausführungszeit (dokumentiert) Hier ). Diese Prüfung hebt alle Skripte auf Ihrer Seite hervor, die die Interaktion eines Benutzers mit dieser Seite verzögern können.
PageSpeed Insights ist ein Online-Tool, mit dem Sie auch die Leistung Ihrer Website hervorheben können. Es enthält Labordaten von Lighthouse und reale Daten zur Leistung Ihrer Website aus dem Chrome User Experience Report. Ihre Web-Hosting Service kann andere Optionen haben.
Codeabdeckung in Chrome Developer Tools
Wenn es so aussieht, als hätten Sie teure Skripte, die besser aufgeteilt werden könnten, ist das nächste zu betrachtende Tool die Code Coverage-Funktion in den Chrome Developer Tools (DevTools> Menü oben rechts> Weitere Tools> Coverage). Hiermit wird gemessen, wie viel nicht verwendetes JavaScript (und CSS) auf Ihrer Seite vorhanden ist. Für jedes zusammengefasste Skript zeigt DevTools die 'nicht verwendeten Bytes' an. Dies ist Code, den Sie in Betracht ziehen können, wenn der Benutzer ihn benötigt.
Die verschiedenen Arten der Codeaufteilung
Es gibt verschiedene Ansätze, wenn es um die Aufteilung von JavaScript in Code geht. Wie stark diese für Ihre Site gelten, hängt davon ab, ob Sie die Seiten- / Anwendungslogik oder die Bibliotheken / Frameworks von anderen Anbietern aufteilen möchten.
Dynamische Codeaufteilung: Viele von uns importieren 'statisch' JavaScript-Module und Abhängigkeiten, sodass sie beim Erstellen zu einer Datei zusammengefasst werden. Durch die dynamische Codeaufteilung können Sie Punkte in Ihrem JavaScript definieren, die Sie nach Bedarf aufteilen und verzögern möchten. Modernes JavaScript nutzt die Dynamik importieren() Aussage, um dies zu erreichen. Wir werden dies in Kürze behandeln.
Aufteilung des Lieferantencodes: Es ist unwahrscheinlich, dass sich die Frameworks und Bibliotheken, auf die Sie sich verlassen (z. B. React, Angular, Vue oder Lodash), in den Skripten ändern, die Sie an Ihre Benutzer senden, häufig als 'Logik' für Ihre Site. Um die negativen Auswirkungen der Cache-Ungültigmachung für Benutzer, die zu Ihrer Site zurückkehren, zu verringern, können Sie Ihre 'Anbieter' in ein separates Skript aufteilen.
Aufteilung des Einstiegspunktcodes: Einträge sind Ausgangspunkte in Ihrer Site oder App, auf die ein Tool wie Webpack zugreifen kann, um Ihren Abhängigkeitsbaum aufzubauen. Das Aufteilen nach Einträgen ist nützlich für Seiten, auf denen kein clientseitiges Routing verwendet wird oder Sie sich auf eine Kombination aus Server- und clientseitigem Rendering verlassen.
Für unsere Zwecke in diesem Artikel konzentrieren wir uns auf die dynamische Codeaufteilung.
Machen Sie sich mit der Code-Aufteilung vertraut
Lassen Sie uns die JavaScript-Leistung von a optimieren einfache Anwendung, die drei Zahlen sortiert durch Code-Aufteilung - dies ist eine App von meinem Kollegen Houssein Djirdeh. Der Workflow, mit dem wir unser JavaScript schnell laden können, ist Messen, Optimieren und Überwachen. Fang hier an .
Leistung messen
Bevor wir versuchen, Optimierungen hinzuzufügen, werden wir zunächst die Leistung unseres JavaScript messen. Da die Magic Sorter App auf Glitch gehostet wird, verwenden wir die Codierungsumgebung. So geht's:
- Klicken Sie auf die Schaltfläche Show Live.
- Öffnen Sie die DevTools durch Drücken von CMD + OPTION + i / STRG + UMSCHALT + i.
- Wählen Sie das Netzwerkfenster.
- Stellen Sie sicher, dass Cache deaktivieren aktiviert ist, und laden Sie die App neu.
Diese einfache Anwendung scheint 71,2 KB JavaScript zu verwenden, um nur einige Zahlen zu sortieren. Das scheint sicher nicht richtig zu sein. In unserer Quelle src / index.js wird die Lodash-Dienstprogrammbibliothek importiert und wir verwenden Sortieren nach - eines seiner Sortierdienstprogramme - um unsere Nummern zu sortieren. Lodash bietet mehrere nützliche Funktionen, aber die App verwendet nur eine einzige Methode. Es ist ein häufiger Fehler, alle Abhängigkeiten von Drittanbietern zu installieren und zu importieren, obwohl Sie tatsächlich nur einen kleinen Teil davon verwenden müssen.
Optimieren Sie Ihr Bundle
Es gibt einige Optionen zum Trimmen unserer JavaScript-Bundle-Größe:
- Schreiben Sie eine benutzerdefinierte Sortiermethode, anstatt sich auf eine Bibliothek eines Drittanbieters zu verlassen.
- Benutzen Array.prototype.sort () , die in den Browser eingebaut ist.
- Importieren Sie nur die Sortieren nach Methode von Lodash anstelle der gesamten Bibliothek.
- Laden Sie den Code zum Sortieren nur herunter, wenn ein Benutzer ihn benötigt (wenn er auf eine Schaltfläche klickt).
Die Optionen 1 und 2 eignen sich zur Reduzierung unserer Bundle-Größe - diese sind wahrscheinlich für eine echte Anwendung sinnvoll. Zu Unterrichtszwecken werden wir etwas anderes ausprobieren. Die Optionen 3 und 4 tragen zur Verbesserung der Leistung der Anwendung bei.
Importieren Sie nur den Code, den Sie benötigen
Wir werden einige Dateien ändern, um nur die einzelne zu importieren Sortieren nach Methode, die wir von Lodash brauchen. Beginnen wir mit dem Ersetzen unserer lodash Abhängigkeit in 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 _ from 'lodash'; import sortBy from 'lodash.sortby';Als nächstes aktualisieren wir, wie die Werte sortiert werden:
js form.addEventListener('submit', e => { e.preventDefault(); const values = [input1.valueAsNumber, input2.valueAsNumber, input3.valueAsNumber]; const sortedValues = _.sortBy(values); const sortedValues = sortBy(values); results.innerHTML = ` ${sortedValues}
` });Laden Sie die App für magische Zahlen neu, öffnen Sie die Entwicklertools und sehen Sie sich das Netzwerkfenster erneut an. Für diese spezielle App wurde unsere Bundle-Größe mit wenig Aufwand um eine Skala von vier reduziert. Aber es gibt noch viel Raum für Verbesserungen.
Aufteilung des JavaScript-Codes
Webpack ist einer der beliebtesten JavaScript-Modul-Bundler, die heute von Webentwicklern verwendet werden. Es bündelt (kombiniert) alle Ihre JavaScript-Module und andere Assets in statischen Dateien, die Webbrowser lesen können.
Das einzelne Bundle in dieser Anwendung kann in zwei separate Skripte aufgeteilt werden:
- Einer ist für den Code verantwortlich, aus dem die ursprüngliche Route besteht.
- Ein anderer enthält unseren Sortiercode.
Dynamische Importe verwenden (mit dem importieren() Schlüsselwort), ein zweites Skript kann bei Bedarf faul geladen werden. In unserer Magic Numbers App kann der Code, aus dem das Skript besteht, nach Bedarf geladen werden, wenn der Benutzer auf die Schaltfläche klickt. Wir beginnen mit dem Entfernen des Imports der obersten Ebene für die Sortiermethode in src / index.js ::
import sortBy from 'lodash.sortby';Importieren Sie es in den Ereignis-Listener, der beim Klicken auf die Schaltfläche ausgelöst wird:
form.addEventListener('submit', e => { e.preventDefault(); import('lodash.sortby') .then(module => module.default) .then(sortInput()) .catch(err => { alert(err) }); }); Diese Dynamik importieren() Die von uns verwendete Funktion ist Teil eines Standardstrack-Vorschlags, mit dem ein Modul dynamisch in den JavaScript-Sprachstandard importiert werden kann. Webpack unterstützt diese Syntax bereits. Lesen Sie mehr darüber, wie dynamische Importe funktionieren In diesem Artikel .
Das importieren() Anweisung gibt ein Versprechen zurück, wenn es aufgelöst wird. Webpack betrachtet dies als einen Split-Punkt, der in ein separates Skript (oder einen Block) aufgeteilt wird. Sobald das Modul zurückgegeben wird, wird die module.default wird verwendet, um auf den Standardexport zu verweisen, der von bereitgestellt wird lodash . Das Versprechen ist mit einem anderen verkettet .dann() a anrufen sortInput Methode zum Sortieren der drei Eingabewerte. Am Ende der Versprechen-Kette, .Fang() wird aufgefordert, zu behandeln, wo das Versprechen aufgrund eines Fehlers abgelehnt wird.
In einer realen Produktionsanwendung sollten Sie dynamische Importfehler angemessen behandeln. Einfache Warnmeldungen (ähnlich wie hier verwendet) werden verwendet und bieten möglicherweise nicht die beste Benutzererfahrung, um Benutzer wissen zu lassen, dass ein Fehler aufgetreten ist.
Wenn Sie einen Flusenfehler wie 'Analysefehler: Import und Export werden möglicherweise nur auf der obersten Ebene angezeigt' sehen, wissen Sie, dass dies darauf zurückzuführen ist, dass die dynamische Importsyntax noch nicht abgeschlossen ist. Obwohl Webpack dies unterstützt, wurden die von Glitch verwendeten Einstellungen für ESLint (ein JavaScript-Flusenwerkzeug) noch nicht aktualisiert, um diese Syntax einzuschließen, 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 von übernimmt lodash.sortBy . Die verschachtelte Funktion kann 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 = ` ${sortedValues}
` }; }Überwachen Sie die Zahlen
Lassen Sie uns nun die Anwendung ein letztes Mal neu laden und das Netzwerkfenster im Auge behalten. Sie sollten beachten, dass beim Laden der App nur ein kleines erstes Bundle heruntergeladen wird. Nachdem Sie auf die Schaltfläche geklickt haben, um die eingegebenen Nummern zu sortieren, wird das Skript / der Block mit dem Sortiercode abgerufen und ausgeführt. Sehen Sie, wie die Zahlen immer noch so sortiert werden, wie wir es erwarten würden?
Das Aufteilen von JavaScript-Code und das verzögerte Laden können sehr nützlich sein, um die anfängliche Bundle-Größe Ihrer App oder Site zu verringern. Dies kann direkt zu schnelleren Ladezeiten für Benutzer führen. Obwohl wir uns mit dem Hinzufügen von Code-Splitting zu einer Vanilla-JavaScript-Anwendung befasst haben, können Sie ihn auch auf Apps anwenden, die mit Bibliotheken oder Frameworks erstellt wurden.
Lazy-Loading mit einer JavaScript-Bibliothek oder einem Framework
Viele gängige Frameworks unterstützen das Hinzufügen von Code-Splitting und Lazy-Loading mithilfe dynamischer Importe und Webpack.
Hier erfahren Sie, wie Sie eine Filmbeschreibungskomponente mithilfe von React (mit) verzögert laden können React.lazy () und ihre Suspense-Funktion), um einen Fallback 'Laden ...' bereitzustellen, während die Komponente faul geladen wird (siehe Hier für einige weitere Details):
import React, { Suspense } from 'react'; const Description = React.lazy(() => import('./Description')); function App() { return ( My Movie
); }Durch die Aufteilung des Codes können Sie die Auswirkungen von JavaScript auf Ihre Benutzererfahrung verringern. Betrachten Sie es auf jeden Fall, wenn Sie größere JavaScript-Bundles haben und im Zweifelsfall nicht vergessen, 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. Kaufen Sie hier die Ausgabe 317 oder Abonnieren Sie hier .
Zum Thema passende Artikel:
