JavaScript Kompressoren: Wie und Warum zu verkleinern Ihre JS

0
120

Wir haben alle dort gewesen, haben Sie gelernt, wie man ein awesome website

Wie man eine Website zu Machen: Für Anfänger

Wie man eine Website zu Machen: Für Anfänger
Heute habe ich ‘ ll führen Sie durch den Prozess der Herstellung eine komplette website von Grund auf neu. Keine Sorge, wenn das klingt schwierig. Ich werde führen Sie durch jeden Schritt des Weges.
Lesen Sie Mehr

, aber wenn Sie es veröffentlichen, es ist unerträglich langsam.

Minifying javascript ist ein Weg, um die Geschwindigkeit der website Reaktionszeiten (zusammen mit komprimieren von HTML

Wie Komprimiert HTML so Funktioniert und Warum Man Es Brauchen Kann

Wie Komprimiert HTML so Funktioniert und Warum Man Es Brauchen Kann
In diesem Artikel gehen wir über die zwei wichtigsten Methoden für komprimierte HTML, warum HTML-Dateien, die verkleinert werden soll, und wie Sie gehen über es.
Lesen Sie Mehr

), und zum Glück für Sie, es ist ein einfacher Prozess. Heute werde ich zeigen Ihnen alles, was Sie brauchen, um wissen.

Was Bedeutet Minifizieren Bedeuten?

Der Prozess der Verkleinerung (oder minifying) ist ein einfaches Konzept. Beim schreiben von code in JavaScript oder einer anderen Sprache, es gibt viele features, die sind nur erforderlich, um den code einfacher für Menschen zu verstehen — Computer, egal, was Sie rufen Sie Ihre Variablen, oder wie viel Abstand da ist, um Klammern, zum Beispiel.

minified code

Durch minifying-code, können Sie drastisch reduzieren Ihre Dateigröße. Eine kleinere Datei wird somit schneller für die Benutzer zum herunterladen. Wenn Sie nur schreiben ein oder zwei JavaScript-Zeilen, die es wahrscheinlich nicht zu einer spürbaren Verbesserung. Allerdings, wenn Sie schreiben viel code, oder mit großen Bibliotheken wie jQuery, die deutliche performance-Steigerungen und drastisch reduzierten Dateigrößen sind leicht erreichbar!

Wenn man code aus einer externen CDN

Was CDNs Sind & Warum Die Lagerung Ist Kein Problem Mehr

Was CDNs Sind & Warum Die Lagerung Ist Kein Problem Mehr
CDNs machen das Internet schnell und Webseiten erschwinglich, auch wenn Sie skalieren, um Millionen von Nutzern. Erstens, Bandbreite kostet Geld; diejenigen von uns, die auf begrenzte Verträge, die wissen, dass alle zu gut. Nicht nur, dass Sie…
Lesen Sie Mehr

wie Google Hosted Libraries, die Sie verwendet haben, minified code.

Was Bedeutet Minified Code Aussehen?

Schauen wir uns einige Beispiele. Es ist schwer zu sehen, die Auswirkungen der Verkleinerung auf kleine code-Basen, so dass ich entschuldige mich im Voraus für Ihre lange Länge.

Hier einige unminified JavaScript von unserem guide bei der Verwendung von JSON mit Python und JavaScript:

// setup einige JSON zu verwenden
var Autos = [
{ “make”:”Porsche”, “model”:”911″ },
{ “make”:”Mercedes-Benz”, “model”:”220SE” },
{ “make”:”Jaguar”,”model”: “Mark VII” }
];

Fenster.onload = function() {
// setup-Taste, klicken Sie auf
Dokument.getElementById(“theButton”).onclick = Funktion() {
doWork()
};
}

Funktion doWork() {
// ajax-JSON auf dem server
$.post(“Empfänger”, Autos, function(){

});
// stoppen link, die Seite neu zu laden
event.preventDefault();
}

Hier ist die minified code:

Funktion doWork(){$.post(“Empfänger”,Autos,function(){}),event.preventDefault()}var Autos=[{machen:”Porsche”,Modell:”911″},{machen:”Mercedes-Benz”,Typ:”220SE”},{machen:”Jaguar”,Modell:”Mark VII”}];window.onload=function(){document.getElementById(“theButton”).onclick=function(){doWork()}};

Diese minified version des code 39 Prozent kleiner. In diesem Beispiel hat die variable den Namen bleiben dieselben, aber alle Leerzeichen und Kommentare entfernt wurden.

Hier ist ein weiteres Beispiel von unserem guide zu jQuery:

// dfd == deferred
var dfd = $.Deferred();

Funktion doThing() {
$.get(‘einige/langsam/url’, function() {
dfd.resolve();
});
zurück dfd.promise();
}

$.wenn(doThing()).dann(function(){
console.log(‘YAY, es ist fertig’);
});

Hier ist die minified code:

Funktion doThing(){return $.get(“some/langsam/url”,function(){dfd.resolve()}),dfd.Versprechen()}var dfd=$.Deferred();$.wenn(doThing()).dann(function(){console.log(“HURRA, es ist fertig”)});

Diesmal gab es nur einen 26-Prozent – Reduzierung — das ist immer noch sehr gut für so ein kleines code-block.

Hier ist ein letztes Beispiel aus unserem guide in Javascript und das DOM:

//deklarieren Sie eine neue variable, um eine neue h1-element

var newHeading = document.createElement(“h1”);

//fügen Sie den text-Knoten des Dokuments

var h1Text = document.createTextNode(“Überschrift Ebene 1”);

//machen Sie einen untergeordneten Knoten mit der neuen überschrift

newHeading.appendChild(h1Text);

//Anhängen dieser als Kind-element definiert als “bt”
Dokument.getElementById(“bt”).appendChild(newHeading);

Beachten Sie, wie es gibt eine Menge Kommentare und whitespace. Die minified-version reduziert die Dateigröße von 52 Prozent :

var newHeading=document.createElement(“h1”),h1Text=document.createTextNode(“Überschrift Ebene 1”);newHeading.appendChild(h1Text),Dokument.getElementById(“bt”).appendChild(newHeading);

Hier sind die Größen von einigen gängigen JavaScript-Bibliotheken im Vergleich zu Ihren minified 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 komprimiert (~80 Prozent), während andere sind nicht ganz so gut (~40 Prozent). Das heißt, jedes speichern wird Ihre website schneller für die Benutzer, und reduzieren Sie die Belastung auf Ihrem web-server.

Wie Kann Sie Verkleinern?

Jetzt wissen Sie, wie es funktioniert und wie es aussieht, lassen Sie uns Tauchen Sie ein in wie es zu tun. Keine Sorge, es gibt keine Notwendigkeit, manuell ändern Sie Ihren code an alle! Es gibt eine Vielzahl von tools, die frei verfügbar sind, die sich mit dem Prozess für Sie.

Diese arbeiten in mehrfacher Hinsicht. Die meisten online-tools erlauben das kopieren und einfügen von code, die Sie dann verarbeiten und wieder zu Euch auf die Seite. Diese Werkzeuge werden oft lassen Sie mehrere Dateien hochladen sowie.

Hier ist eine kurze round-up der online-tools. Sie arbeiten meist die gleiche-Sie brauchen also nicht zu viel sorgen, über die man zu wählen.

JSCompress — ich persönlich benutze diese website am meisten, wenn es nur eine schnelle Aufgabe. Es ist schnell zu laufen und Sie auch zeigen Ihnen die Werkzeuge, die Sie verwendet, um es zu bauen.

jscompress

JavaScript Minifier — Das tool funktioniert gut, aber es ist wirklich glänzt als eine API. Dies können Sie bauen Ihre eigene integration oder service auf Ihre bestehende website.

javascript minifier

JavaScript Minifier — einer Anderen website mit dem gleichen Namen, dieses tool ist so einfach, wie Sie kommen. Keine Optionen oder Menüs, die nur einer Taste.

havascript minifier

Verkleinern — Diese website sieht erstaunlich, und die Entwickler haben eindeutig die Aufmerksamkeit auf die details hier.

minify

Diese Liste könnte ewig so weitergehen. Es gibt so viele online-tools zum verkleinern websites, ist es schwer zu schief gehen.

Minifying-tools existieren auch als Befehlszeilen-tools oder plugins für den JavaScript-editor

Top 5 Javascript-Editoren, Die Machen Viel Einfacher Codierung

Top 5 Javascript-Editoren, Die Machen Viel Einfacher Codierung
In diesen Tagen, es gibt nur fünf Redakteure jeden Fall eine überlegung Wert beim schreiben von JavaScript. Finden Sie Dutzende von alternativen, aber keiner von Ihnen halten eine Kerze, um diese, so vergeuden Sie nicht Ihre Zeit.
Lesen Sie Mehr

. Diese tools sind oft sehr viel schneller zu verwenden, und “nur Arbeit” mit den existierenden code. Es gibt keine Notwendigkeit, kopieren und einfügen, und Sie nicht haben, um ziehen Sie Ihre JavaScript aus jeder beliebigen HTML-oder CSS, die möglicherweise in der gleichen Datei.

Wenn Sie mithilfe von Microsoft Visual Studio, die Bundler und Minifier Erweiterung aus dem Marktplatz hat über 600.000 installiert! Nicht nur das, sondern es ist regelmäßig aktualisiert und verfügbar auf GitHub.

Wenn Sie ein fan von Sublime Text, wie ich bin, dann ist das minifizieren Paket ist die, die Sie wollen. Mit über rund 61.000 Installationen, es ist ein sehr beliebtes Paket ist, und eine, die ist auch verfügbar auf GitHub, sollten Sie den Wunsch haben, einen Beitrag zu einer open-source-Projekt.

sublime minify

Schließlich, wenn Sie ein PyCharm Benutzer, können Sie es konfigurieren, zu integrieren und direkt mit vielen gängigen Kompressions-tools wie YUI compressor. Viele dieser tools treiben Sie direkt die online-tools die oben aufgeführt sind.

Vorsichtsmaßnahmen

Es muss ein catch-Recht? Nichts kann jemals perfekt sein. Gut, ja, es ist ein problem, aber es ist ziemlich geringfügig und leicht gearbeitet, um:

Minified code nicht in seinen ursprünglichen Zustand wiederhergestellt.

Beim minifizieren von code in seine ursprüngliche form verloren. Sie brauchen, um eine Kopie davon zu halten, wenn Sie wollen, haben jede Hoffnung auf eine leicht größere änderungen — es ist nicht genug, um version-control

Was Ist Git und Warum Sollten Sie Verwenden Version-Control-Wenn Du Entwickler bist

Was Ist Git und Warum Sollten Sie Verwenden Version-Control-Wenn Du Entwickler bist
Als web-Entwickler eine Menge der Zeit wir sind in der Regel auf die lokale Entwicklung Seiten dann laden Sie einfach alles wenn wir fertig sind. Das ist in Ordnung, wenn es nur Sie und die Veränderungen sind klein,…
Lesen Sie Mehr

.

Es ist zwar möglich, unminify Ihren code, es ist nie ganz das gleiche wieder. Alle Ihre wertvollen Kommentare verloren gehen, für eine Sache.

Dies ist nicht ein großes problem, aber Sie müssen halten Sie im Verstand, wenn Codierung. Als Grundregel gilt, unkomprimierte > Entwicklung und komprimiert > Produktion.

Jetzt wissen Sie alles, was es zu wissen gibt über minifying JavaScript! Minifying-code ist einer der Wege, um squeeze-Leistung mit einem server, und alle großen websites sind, es zu tun.

Welche tools verwenden Sie, um zu verkleinern Sie Ihren code? Tun Sie überhaupt? Lassen Sie uns wissen in den Kommentaren unten!

Bild-Kredit: NavinTar via Shutterstock