Share
Eine der wertvollsten Methoden zur Optimierung Ihres JavaScript-Codes könnte Sie überraschen, indem Sie ihn vollständig aus Ihren HTML-Dateien entfernen. In diesem Video aus meinem Kurs The Designer's Guide to JavaScript Optimization erfahren Sie, wie Sie JavaScript auslagern und minimieren können.
Eine gute Möglichkeit, die Effizienz unseres Codes zu steigern, ist das Externalisieren und Minimieren unseres Codes.
Wenn wir über das Externalisieren unseres Codes sprechen, nehmen wir unser gesamtes JavaScript aus unseren HTML-Seiten und setzen es in eine separate JavaScript-Datei, eine .js-Datei.
Es ist sehr leicht zu machen. Du würdest einfach alles mitnehmen Skript Tags, entfernen Sie es und erstellen Sie eine neue Textdatei mit der Erweiterung .js. Dann würden Sie einfach eine Skript Tag, um auf diese Datei zu zeigen.
Hier ist ein Beispiel. Ich habe eine index.html-Datei mit JavaScript-Code darin. Also hebe ich einfach alles im hervor Skript Tags und schneiden Sie es.
Und dann können wir die loswerden Skript Tags insgesamt durch Markieren und Löschen.
Und dann werde ich eine neue JavaScript-Datei in meinem JavaScript-Ordner erstellen und sie einfach aufrufen site.js.
Es ist egal, welchen Texteditor Sie verwenden. Ich verwende hier Visual Studio-Code, aber Sie könnten auch Klammern oder einen anderen Texteditor verwenden. Aber ich speichere es als site.js und füge einfach den gesamten JavaScript-Code ein.
Jetzt wird es noch nicht funktionieren, da wir in unserer HTML-Datei noch nicht auf dieses JavaScript verweisen.
Wir können aber zu unserer index.html zurückspringen. Und nachdem wir all unsere Abhängigkeiten geladen haben, erstellen wir unsere eigenen Skript Tag, um die gerade erstellte Datei zu laden.
Also in unserem JavaScript-Ordner js / und dann habe ich es angerufen site.js, Der Code lautet also:
Das ist wirklich alles, was Sie brauchen, um Ihr JavaScript zu externalisieren.
Einer der großen Vorteile von JavaScript in einer separaten Datei ist, dass Sie diesen JavaScript-Code sehr einfach minimieren oder minimieren können. Und wenn Sie eine reduzierte Version Ihres Codes haben, wird diese reduzierte Version viel schneller ausgeführt, da die Dateigröße geringer sein wird.
Es wird schwierig sein, diese reduzierte Datei zu lesen oder zu bearbeiten. Deshalb speichern Sie die Originalkopie Ihres JavaScript, damit Sie Änderungen an dieser Original-JavaScript-Datei vornehmen und sie dann erneut verkleinern können, wenn Sie Änderungen vornehmen müssen.
Nun, wie geht es dir? Es gibt mehrere Möglichkeiten.
Die meisten modernen Code-Editoren verfügen über Plug-Ins, die Ihr JavaScript für Sie minimieren. Zum Beispiel verwende ich Visual Studio Code. Wenn wir zu unseren Erweiterungen gehen und einfach nach "minify" suchen, können Sie verschiedene Optionen zur Minimierung Ihres Codes sehen.
Ein anderer kostenloser Online-Texteditor namens Brackets enthält auch Erweiterungen, mit denen Sie Code minimieren können. Wenn Sie also zum Erweiterungsmanager für Klammern gehen und nach "Minify" suchen, wird ein JavaScript-Minifier angezeigt.
Denken Sie daran, dass Sie, nachdem Sie den Code minimiert haben, die Datei ändern müssen, auf die Sie in der HTML-Datei zeigen. Wenn Sie site.js minimiert haben, hätten Sie wahrscheinlich eine neue Version namens site.min.js. Daher möchten Sie in Ihrem HTML-Code anstelle der Originalversion Ihres Codes auf diese reduzierte Version verweisen. Ansonsten ist diese Minifizierung sinnlos
Wenn Sie aus irgendeinem Grund den gesamten Code mit Notepad bearbeiten möchten, können Sie ihn dennoch minimieren, und Sie können dies auch tun, indem Sie auf eine Website wie JSCompress gehen.
Im Grunde können Sie nur Ihren Code einfügen und dann auf die JavaScript komprimieren Schaltfläche, und Sie werden sehen, dass dies unseren Code um 74% komprimiert.
Dies ist nur ein kleiner Teil von JavaScript. Sie können sich also vorstellen, dass Sie mit einer Menge JavaScript auf Ihrer Seite wirklich viel Dateigröße sparen würden. Und wenn Sie eine stark frequentierte Website haben, hilft das wirklich sehr.
Ein Vorteil des Externalisierens und Minimierens von JavaScript besteht darin, dass Sie das Zwischenspeichern etwas besser handhaben können.
Nehmen wir zum Beispiel an, Sie haben einen Teil des JavaScript-Codes, den Sie auf verschiedenen Seiten Ihrer Website verwenden werden. Es wäre sinnvoll, diesen kleinen Teil des JavaScript-Codes in eine eigene JavaScript-Datei zu packen, sodass der Benutzer ihn einmal im Browser besucht, wenn er ihn einmal besucht. Wenn sie dann eine andere Seite besuchen, die auf dieselbe JavaScript-Datei verweist, muss sie dieses JavaScript nicht erneut laden. Dadurch wird die Anzahl der Anforderungen reduziert, die für dieses bestimmte JavaScript-Element gestellt werden.
Wenn Sie dies auf die nächste Ebene bringen möchten, können Sie ein Content Delivery Network (CDN) verwenden, um Versionen Ihrer JavaScript-Dateien an geografisch verschiedenen Standorten zu speichern. Möglicherweise haben Sie Ihr JavaScript auf Servern auf der ganzen Welt gespeichert.
Der Vorteil ist, dass wenn Sie Ihre Website in Texas erstellt haben und jemand in Großbritannien auf Ihre Website zugreifen möchte, der Benutzer ohne CDN eine Verbindung zu Ihrem Server herstellen muss, um alle benötigten Dateien zu erhalten.
Befindet sich Ihr JavaScript jedoch in einem CDN, besteht die Chance, dass sich eine JavaScript-Datei auf einem Server befindet, entweder in Großbritannien oder irgendwo in Europa. Es wäre also viel näher am Standort des Benutzers, was bedeutet, dass der Download schneller und reibungsloser ablaufen würde.
Denken Sie daran, dass ein CDN Geld kostet. Das ist wirklich nur etwas, das Sie verfolgen möchten, wenn Sie für das nächste Level bereit sind. Aber es kann wirklich helfen, Ihre Website zu beschleunigen.
Im gesamten Kurs, dem Designer's Guide zur JavaScript-Optimierung, lernen Sie weitere Optimierungstechniken kennen, die perfekt für Webdesigner geeignet sind. Ich werde Ihnen einige einfach zu implementierende Techniken zeigen, mit denen Sie JavaScript und damit Ihre Websites problemlos ausführen können.
Sie können diesen Kurs mit einem Abonnement von Envato Elements sofort absolvieren. Für eine einmalige geringe monatliche Gebühr erhalten Sie nicht nur Zugriff auf diesen Kurs, sondern auch auf unsere wachsende Bibliothek mit über 1.000 Videokursen und branchenführenden eBooks für Envato Tuts+.
Außerdem erhalten Sie jetzt unbegrenzte Downloads aus der riesigen Envato Elements-Bibliothek mit mehr als 460.000 kreativen Assets. Erstellen Sie mit einzigartigen Schriftarten, Fotos, Grafiken und Vorlagen und sorgen Sie schneller für bessere Projekte.
Accentsconagua