JavaScript Compressors Wie und warum sollte Ihr JS minimiert werden?

Wir waren alle dort, Sie haben gelernt, wie man eine fantastische Website aufbaut. Wie man eine Website erstellt: Für Anfänger Wie man eine Website erstellt: Für Anfänger Heute werde ich Sie durch den gesamten Prozess der Erstellung einer kompletten Website führen. Mach dir keine Sorgen, wenn das schwierig klingt. Ich werde Sie bei jedem Schritt des Weges durch das Haus führen. Lesen Sie mehr, aber sobald Sie es veröffentlichen, ist es unerträglich langsam.

Das Reduzieren Ihres Javascript ist eine Möglichkeit, um die Reaktionszeiten von Websites zu beschleunigen (zusammen mit dem Komprimieren von HTML. Wie komprimiertes HTML funktioniert und warum Sie es möglicherweise benötigen. Wie komprimiertes HTML funktioniert und warum Sie es möglicherweise benötigen.) In diesem Artikel werden die beiden wichtigsten Methoden erläutert für komprimiertes HTML: Warum sollten HTML-Dateien geschrumpft werden und wie Sie vorgehen sollten (Weitere Informationen), und zum Glück ist dies ein einfacher Prozess. Heute zeige ich Ihnen alles, was Sie wissen müssen.

Was bedeutet Minify??

Der Prozess von Minifizierung (oder minifying) ist ein einfaches Konzept. Wenn Sie Code in JavaScript oder einer anderen Sprache schreiben, gibt es viele Funktionen, die nur erforderlich sind, um den Code für den Menschen verständlicher zu machen. Computer kümmern sich nicht darum, wie Sie Ihre Variablen nennen, oder wie viel Abstand zwischen den Klammern steht Beispiel.

Durch Minimieren von Code können Sie die Dateigröße drastisch reduzieren. Eine kleinere Datei kann daher schneller heruntergeladen werden. Wenn Sie nur eine oder zwei Zeilen JavaScript schreiben, wird es wahrscheinlich keine merkliche Verbesserung geben. Wenn Sie jedoch viel Code schreiben oder große Bibliotheken wie jQuery verwenden, sind spürbare Leistungssteigerungen und drastisch reduzierte Dateigrößen leicht zu erreichen!

Wenn Sie Code von einem externen CDN laden Was CDNs sind und warum Speicher kein Problem mehr ist Was CDNs sind und warum Speicher kein Problem mehr ist CDNs machen das Internet schnell und erschwinglich, selbst wenn Sie Millionen Benutzer erreichen. Erstens kostet Bandbreite Geld; Diejenigen von uns mit befristeten Verträgen wissen das nur zu gut. Sie haben nicht nur… Lesen Sie mehr, wie Google Hosted Libraries, Sie haben bereits minimierten Code verwendet.

Wie sieht reduzierter Code aus??

Sehen wir uns einige Beispiele an. Es ist schwer zu sehen, wie sich die Minifizierung auf kleine Codebasis auswirkt, daher entschuldige ich mich im Voraus für ihre lange Dauer.

Hier sind einige unbemerkt JavaScript aus unserem Handbuch zur Verwendung von JSON mit Python und JavaScript:

// Einige JSON einrichten, um var cars = ["make": "Porsche", "model": "911S", "make": "Mercedes-Benz", "model": "220SE",  "make": "Jaguar", "model": "Mark VII"]; window.onload = function () // Einrichtung der Schaltfläche klicken Sie auf document.getElementById ("theButton"). onclick = function () doWork ();  function doWork () // ajax die JSON an den Server $ .post ("receiver", cars, function () ); // Link anhalten, um die Seite neu zu laden event.preventDefault (); 

Hier ist der verminderte Code:

function doWork () $. post ("Empfänger", Autos, Funktion () ), event.preventDefault () var cars = [Marke: "Porsche", Modell: "911S", Marke: " Mercedes-Benz ", Modell:" 220SE ", Marke:" Jaguar ", Modell:" Mark VII "]; window.onload = function () document.getElementById (" theButton "). Onclick = function () arbeite();

Diese reduzierte Version des Codes ist 39 Prozent kleiner In diesem Beispiel bleiben die Variablennamen gleich, aber alle Leerzeichen und Kommentare wurden entfernt.

Hier ist ein weiteres Beispiel aus unserem Leitfaden zu jQuery:

// dfd == verzögert var dfd = $ .Deferred (); function doThing () $ .get ('some / slow / url', function () dfd.resolve ();); return dfd.promise ();  $ .when (doThing ()). then (function () console.log ('YAY, es ist fertig'););

Hier ist der verminderte Code:

function doThing () return $ .get ("einige / langsame / url", function () dfd.resolve ()), dfd.promise () var dfd = $. Deferred (); $. when (doThing ()). dann (function () console.log ("YAY, es ist fertig"));

Diesmal gab es nur eine 26 Prozent Reduktion - das ist immer noch sehr gut für so einen kleinen Codeblock.

Hier ein letztes Beispiel aus unserem Leitfaden zu Javascript und dem DOM:

// Deklariere eine neue Variable, die ein neues H1-Element enthalten soll var newHeading = document.createElement ("h1"); // füge den Textknoten zum Dokument hinzu var h1Text = document.createTextNode ("Heading Level 1"); // einen untergeordneten Knoten der neuen Überschrift machen newHeading.appendChild (h1Text); // Dies als untergeordnetes Element des Elements "bt" hinzufügen document.getElementById ("bt"). appendChild (newHeading);

Beachten Sie, wie es gibt viel von Kommentaren und Leerzeichen. Die reduzierte Version reduzierte die Dateigröße um 52 Prozent :

var newHeading = document.createElement ("h1"), h1Text = document.createTextNode ("Kopfebene 1"); newHeading.appendChild (h1Text), document.getElementById ("bt"). appendChild (newHeading);

Hier sind die Größen einiger gängiger JavaScript-Bibliotheken im Vergleich zu ihren reduzierten Versionen:

1. Highcharts: 1 MB> 201 KB
2. jQuery: 270 KB> 90 KB
3. MooTools: 164 KB> 93 KB

Einige dieser Bibliotheken zeigen eine deutliche Größenreduzierung beim Komprimieren (~ 80 Prozent), während andere nicht ganz so gut sind (~ 40 Prozent). Wenn Sie jedoch sparen, wird Ihre Website für Ihre Benutzer schneller und die Belastung Ihres Webservers wird reduziert.

Wie können Sie minimieren??

Jetzt wissen Sie, wie es funktioniert und wie es aussieht. Lassen Sie uns einen Blick darauf werfen, wie es geht. Keine Sorge, Sie müssen Ihren Code überhaupt nicht manuell ändern! Es stehen verschiedene Tools zur Verfügung, die den Prozess für Sie erledigen.

Diese arbeiten auf verschiedene Weise. Bei den meisten Online-Tools können Sie Code kopieren und einfügen, den sie dann verarbeiten und an Sie auf der Seite zurückgeben. Mit diesen Tools können Sie häufig auch mehrere Dateien hochladen.

Hier ist eine kurze Zusammenfassung der Online-Tools. Sie funktionieren meistens gleich, so dass Sie sich nicht zu viele Gedanken darüber machen müssen, welchen Sie wählen sollen.

JSCompress - Ich persönlich benutze diese Website am meisten, wenn es nur um einen schnellen Job geht. Die Ausführung ist schnell und zeigt Ihnen sogar die Werkzeuge, mit denen sie es erstellt haben.

JavaScript Minifier - Dieses Tool funktioniert gut, aber es ist wirklich eine API. Auf diese Weise können Sie Ihre eigene Integration oder Ihren eigenen Service auf der vorhandenen Website aufbauen.

JavaScript Minifier - Eine andere Website mit demselben Namen, dieses Tool ist so einfach wie es nur geht. Keine Optionen oder Menüs, nur eine Taste.

Minify - Diese Website sieht fantastisch aus, und die Entwickler haben hier eindeutig auf die Details geachtet.

Diese Liste könnte für immer weitergehen. Es gibt so viele Online-Tools zum Minimieren von Websites, dass es schwer ist, Fehler zu machen.

Es gibt auch Minify-Tools als Befehlszeilen-Tools oder Plugins für Ihren JavaScript-Editor. Die 5 besten Javascript-Editoren für produktive Codierer und Programmierer Die 5 besten Javascript-Editoren für produktive Codierer und Programmierer Heutzutage gibt es nur fünf Editoren, die es wert sind, JavaScript zu schreiben. Sie können Dutzende von Alternativen finden, aber keine davon hält eine Kerze bereit, also verschwenden Sie keine Zeit. Weiterlesen . Diese Tools sind oft viel schneller zu bedienen und “arbeite einfach” mit Ihrem vorhandenen Code. Sie müssen nicht kopieren und einfügen, und Sie müssen Ihr JavaScript nicht aus HTML oder CSS extrahieren, die sich in derselben Datei befinden.

Wenn Sie Microsoft Visual Studio verwenden, enthält die Bundler- und Minifier-Erweiterung auf dem Markt über 600.000 Installationen! Nicht nur das, es wird regelmäßig aktualisiert und ist auf GitHub verfügbar.

Wenn Sie ein Fan von Sublime Text sind wie ich, dann ist das Minify-Paket genau das, was Sie möchten. Mit über 61.000 Installationen ist es ein sehr beliebtes Paket, das auch auf GitHub verfügbar ist, falls Sie zu einem Open Source-Projekt beitragen möchten.

Wenn Sie ein PyCharm-Benutzer sind, können Sie ihn so konfigurieren, dass er direkt in viele gängige Komprimierungswerkzeuge wie den YUI-Kompressor integriert werden kann. Viele dieser Tools unterstützen die oben aufgeführten Online-Tools direkt.

Vorsichtsmaßnahmen

Dort hat ein Haken sein, richtig? Nichts kann jemals perfekt sein. Nun ja, es gibt ein Problem, aber es ist ziemlich gering und kann leicht umgangen werden:

Der reduzierte Code kann nicht in den ursprünglichen Zustand zurückversetzt werden.

Wenn Sie einen Code minimieren, geht seine ursprüngliche Form verloren. Sie müssen eine Kopie davon aufbewahren, wenn Sie die Hoffnung haben möchten, große Änderungen problemlos vornehmen zu können. Es reicht nicht aus, die Versionskontrolle zu verwenden. Was ist Git? Warum sollten Sie die Versionskontrolle verwenden? Wenn Sie ein Entwickler sind? Was ist Git & Warum? Wenn Sie Entwickler sind, sollten Sie die Versionskontrolle verwenden. Als Webentwickler arbeiten wir meistens auf lokalen Entwicklungsseiten und laden dann einfach alles hoch, wenn wir fertig sind. Dies ist in Ordnung, wenn es nur Sie sind und die Änderungen klein sind .

Es ist zwar möglich, den Code zu entfernen, es ist jedoch nie wieder derselbe. Alle Ihre wertvollen Kommentare gehen zum einen verloren.

Dies ist kein großes Problem, aber Sie müssen es beim Programmieren beachten. Als Grundregel, unkomprimiert > entwickeln und komprimiert > Produktion.

Jetzt wissen Sie alles über das Minimieren von JavaScript! Das Reduzieren von Code ist eine der Möglichkeiten, um die Leistung eines Servers zu reduzieren, und alle großen Websites machen dies.

Welche Tools verwenden Sie, um Ihren Code zu minimieren? Machst du dir überhaupt die Mühe? Lass es uns in den Kommentaren wissen!

Bildnachweis: NavinTar via Shutterstock

Erfahren Sie mehr über: Java, JavaScript, Webdesign.