Home-theater-designers
Wir waren alle da, du hast es gelernt wie erstelle ich eine tolle Website , aber sobald Sie es veröffentlichen, ist es unerträglich langsam.
Die Minimierung Ihres Javascript ist eine Möglichkeit, die Reaktionszeiten der Website zu beschleunigen (zusammen mit HTML komprimieren ) und zum Glück für Sie ist es ein einfacher Vorgang. Heute zeige ich dir alles, was du wissen musst.
Was bedeutet Minimieren?
Der Prozess von Verkleinerung (oder verkleinern ) 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 Menschen leichter verständlich zu machen – Computern ist es egal, wie Sie Ihre Variablen nennen oder wie viel Abstand zwischen Klammern vorhanden ist, zum Beispiel.
Durch Minimieren von Code können Sie die Dateigröße drastisch reduzieren. Eine kleinere Datei wird daher für Ihre Benutzer schneller heruntergeladen. 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 erreichbar!
Wenn Sie Code von einem externen CDN laden, wie z Von Google gehostete Bibliotheken , Sie haben minimierten Code verwendet.
wer folgt mir nicht zurück auf instagram
Wie sieht minifizierter Code aus?
Schauen wir uns einige Beispiele an. Es ist schwer, die Auswirkungen der Minimierung auf kleine Codebasen zu erkennen, daher entschuldige ich mich im Voraus für ihre lange Länge.
Hier ist was ungeschminkt JavaScript aus unserem Leitfaden zur Verwendung von JSON mit Python und JavaScript:
// setup some JSON to use
var cars = [
{ 'make':'Porsche', 'model':'911S' },
{ 'make':'Mercedes-Benz', 'model':'220SE' },
{ 'make':'Jaguar','model': 'Mark VII' }
];
window.onload = function() {
// setup the button click
document.getElementById('theButton').onclick = function() {
doWork()
};
}
function doWork() {
// ajax the JSON to the server
$.post('receiver', cars, function(){
});
// stop link reloading the page
event.preventDefault();
}Hier ist der minifizierte Code:
function doWork(){$.post('receiver',cars,function(){}),event.preventDefault()}var cars=[{make:'Porsche',model:'911S'},{make:'Mercedes-Benz',model:'220SE'},{make:'Jaguar',model:'Mark VII'}];window.onload=function(){document.getElementById('theButton').onclick=function(){doWork()}};Diese minimierte 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 == deferred
var dfd = $.Deferred();
function doThing() {
$.get('some/slow/url', function() {
dfd.resolve();
});
return dfd.promise();
}
$.when(doThing()).then(function(){
console.log('YAY, it is finished');
});Hier ist der minifizierte Code:
function doThing(){return $.get('some/slow/url',function(){dfd.resolve()}),dfd.promise()}var dfd=$.Deferred();$.when(doThing()).then(function(){console.log('YAY, it is finished')});Diesmal gab es nur a 26 Prozent Reduktion -- das ist immer noch sehr gut für einen so kleinen Codeblock.
Hier ist ein letztes Beispiel aus unserem Leitfaden zu Javascript und dem DOM:
//declare a new variable to hold a new h1 element
var newHeading = document.createElement('h1');
//add the text node to the document
var h1Text = document.createTextNode('Heading Level 1');
//make it a child node of the new heading
newHeading.appendChild(h1Text);
//append this as a child of element defined as 'bt'
document.getElementById('bt').appendChild(newHeading);Beachten Sie, wie es viel von Kommentaren und Leerzeichen. Die minimierte Version reduzierte die Dateigröße um 52 Prozent :
welcher youtube kanal hat die meisten abonnenten
var newHeading=document.createElement('h1'),h1Text=document.createTextNode('Heading Level 1');newHeading.appendChild(h1Text),document.getElementById('bt').appendChild(newHeading);Hier sind die Größen einiger gängiger JavaScript-Bibliotheken im Vergleich zu ihren minimierten Versionen:
- Highcharts: 1 MB > 201 KB
- jQuery: 270 KB > 90 KB
- MooTools: 164 KB > 93 KB
Einige dieser Bibliotheken zeigen beim Komprimieren eine erhebliche Größenreduzierung ( ~80 Prozent ), während andere nicht ganz so gut sind ( ~40 Prozent ). Das heißt, jede Einsparung macht Ihre Website für Ihre Benutzer schneller und entlastet Ihren Webserver.
Wie minimierst du?
Jetzt wissen Sie, wie es funktioniert und wie es aussieht. Sehen wir uns an, wie es geht. Keine Sorge, Sie müssen Ihren Code nicht manuell ändern! Es gibt eine Vielzahl von frei verfügbaren Tools, die den Prozess für Sie erledigen.
Diese funktionieren auf verschiedene Weise. Bei den meisten Online-Tools können Sie Code kopieren und einfügen, den sie dann verarbeiten und auf der Seite an Sie zurückgeben. Mit diesen Tools können Sie oft auch mehrere Dateien hochladen.
Hier ist eine kurze Zusammenfassung der Online-Tools. Sie funktionieren meistens gleich, sodass Sie sich nicht allzu viele Gedanken darüber machen müssen, welche Sie wählen sollen.
JSCompress -- Ich persönlich nutze diese Website am meisten, wenn es nur ein schneller Job ist. Es ist schnell zu laufen und sie zeigen Ihnen sogar die Werkzeuge, mit denen es erstellt wurde.
JavaScript-Minifier -- Dieses Tool funktioniert gut, aber es glänzt wirklich als API. Auf diese Weise können Sie Ihre eigene Integration oder Ihren eigenen Dienst auf der bestehenden Website aufbauen.
JavaScript Minifier – Eine weitere Website mit dem gleichen Namen, dieses Tool ist so einfach wie es nur geht. Keine Optionen oder Menüs, nur eine Taste.
Minimieren -- Diese Website sieht fantastisch aus und die Entwickler haben hier eindeutig auf die Details geachtet.
Diese Liste könnte ewig weitergehen. Es gibt so viele Online-Tools, um Websites zu verkleinern, dass es schwer ist, etwas falsch zu machen.
Minifying-Tools gibt es auch als Kommandozeilen-Tools oder Plugins für Ihre JavaScript-Editor . Diese Tools sind oft viel schneller zu verwenden und „arbeiten einfach“ mit Ihrem vorhandenen Code. Sie müssen Ihr JavaScript nicht aus HTML oder CSS extrahieren, die sich möglicherweise in derselben Datei befinden.
Wenn Sie Microsoft Visual Studio verwenden, ist die Bündeler und Verkleinerer Erweiterung vom Marktplatz hat über 600.000 Installationen! Nicht nur das, sondern es wird regelmäßig aktualisiert und verfügbar auf GitHub .
Wenn Sie ein Fan von sind Erhabener Text wie ich bin, dann die Minimieren Paket ist das, was Sie wollen. Mit über 61.000 Installationen ist es ein sehr beliebtes Paket, und das ist es auch verfügbar auf GitHub , falls Sie zu einem Open Source - Projekt beitragen möchten .
Schließlich, wenn Sie ein PyCharm Benutzer, Sie können Konfigurieren Sie es, um es zu integrieren direkt mit vielen gängigen Komprimierungstools wie YUI-Kompressor . Viele dieser Tools betreiben direkt die oben aufgeführten Online-Tools.
Vorbehalte
Dort hat ein Fang sein, oder? Nichts kann jemals perfekt sein. Nun, ja, es gibt ein Problem, aber es ist ziemlich geringfügig und lässt sich leicht umgehen:
Minimierter Code kann nicht in seinen ursprünglichen Zustand zurückversetzt werden.
Wenn Sie einen Code verkleinern, geht seine ursprüngliche Form verloren. Sie müssen eine Kopie davon aufbewahren, wenn Sie die Hoffnung haben möchten, dass Sie problemlos größere Änderungen vornehmen können – es reicht nicht aus, die Versionskontrolle zu verwenden.
Während es möglich ist, verkleinern Ihr Code ist nie wieder ganz derselbe. Alle Ihre wertvollen Kommentare gehen verloren, zum einen.
Dies ist kein großes Problem, aber Sie müssen es beim Codieren im Hinterkopf behalten. Als Grundregel gilt, unkomprimiert > entwickeln und komprimiert > Produktion.
Jetzt wissen Sie alles, was Sie über die Minimierung von JavaScript wissen müssen! Das Minimieren von Code ist eine der Möglichkeiten, die Leistung eines Servers herauszupressen, und alle großen Websites tun dies.
Welche Tools verwenden Sie, um Ihren Code zu minimieren? Störst du dich überhaupt? Lass es uns in den Kommentaren unten wissen!
kein ton auf youtube windows 10
Bildnachweis: NavinTar über Shutterstock
Teilen Teilen Tweet Email Löschen Sie diese Windows-Dateien und -Ordner, um Speicherplatz freizugebenMüssen Sie Speicherplatz auf Ihrem Windows-Computer freigeben? Hier sind die Windows-Dateien und -Ordner, die sicher gelöscht werden können, um Speicherplatz freizugeben.
Weiter lesen Verwandte Themen- Programmierung
- JavaScript
- Java
- Web-Design
Joe hat einen Abschluss in Informatik an der University of Lincoln, Großbritannien. Er ist ein professioneller Softwareentwickler und wenn er nicht gerade Drohnen fliegt oder Musik schreibt, ist er oft beim Fotografieren oder Videoproduzieren anzutreffen.
Mehr von Joe CoburnAbonniere unseren Newsletter
Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!
Klicken Sie hier, um zu abonnieren