{"id":49981,"date":"2022-05-09T08:26:22","date_gmt":"2022-05-09T07:26:22","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=49981&preview=true&preview_id=49981"},"modified":"2024-08-21T09:28:25","modified_gmt":"2024-08-21T08:28:25","slug":"javascript-minimieren","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/javascript-minimieren\/","title":{"rendered":"Wie man JavaScript minimiert – Empfohlene Tools und Methoden"},"content":{"rendered":"

Die meisten Nutzer\/innen w\u00fcnschen sich ein elegantes Surferlebnis im Internet, und JavaScript ist seit langem ein beliebtes Mittel f\u00fcr Entwickler\/innen, um dieses Erlebnis zu erm\u00f6glichen.<\/p>\n

JavaScript ist aber nicht nur dazu da, Webseiten sch\u00f6ner aussehen zu lassen. Es hat auch einen direkten Einfluss auf die Leistung und den Erfolg der Webseite. Die Beschleunigung einer Webseite<\/a> oder die Verk\u00fcrzung der Ladezeit – zwei Konzepte, die bei der JavaScript-Entwicklung eine zentrale Rolle spielen – sind entscheidende Faktoren f\u00fcr die Verbesserung des Nutzererlebnisses.<\/p>\n

Unser Video-Leitfaden zum Mining von JavaScript<\/a><\/h3>\n<\/kinsta-video>\n

Wenn du die Leistung deiner Webseite innerhalb k\u00fcrzester Zeit verbessern willst, musst du dich mit der JavaScript-Minifizierung vertraut machen. Sie hilft dir, alle \u00fcberfl\u00fcssigen Zeichen aus deinem JavaScript-Quellcode zu entfernen, ohne seine Funktionalit\u00e4t zu ver\u00e4ndern. Au\u00dferdem werden dadurch die Ladezeit und die Bandbreitennutzung deiner Webseite verringert.<\/p>\n

JavaScript-Minifizierung kann knifflig sein. In diesem Artikel zeigen wir dir, wie du deinen JavaScript-Code f\u00fcr WordPress- und Nicht-WordPress-Webseiten minifizieren kannst.<\/p>\n

<\/div><\/kinsta-auto-toc>\n\n

Was ist JavaScript?<\/h2>\n
\"JavaScript-Titel<\/a>
JavaScript (Bildquelle: Medium<\/a>)<\/figcaption><\/figure>\n

JavaScript<\/a> ist eine textorientierte Skriptsprache, mit der du interaktive Webseiten sowohl auf der Client- als auch auf der Serverseite erstellen kannst. Sie ist einfacher und weniger komplex als die meisten anderen Sprachen, was ihre weite Verbreitung erkl\u00e4rt.<\/p>\n

W\u00e4hrend HTML<\/a> und CSS<\/a> die Struktur einer Webseite aufbauen, f\u00fcgt JavaScript komplexe Funktionen hinzu, die deine Webseite interaktiv machen und die Nutzer\/innen ansprechen. JavaScript bietet zum Beispiel komplexe Elemente wie eine scrollende Video-Jukebox, 2D\/3D-Videos und interaktive Karten.<\/p>\n

Au\u00dferdem k\u00f6nnen Webbrowser JavaScript verstehen. Daher ist es neben HTML und CSS eine gute Wahl, wenn du dich f\u00fcr die Webentwicklung interessierst. Wenn du eine hochgradig interaktive Webseite erstellen willst, die in allen Browsern ohne Hindernisse l\u00e4uft, ist JavaScript die zuverl\u00e4ssigste Option, die du einsetzen kannst.<\/p>\n

Was ist Code-Minifizierung?<\/h2>\n

Minifizierung wird auch als Minimierung bezeichnet. Code-Minifizierung bedeutet, den Code zu optimieren, um Platz zu sparen, die Ladezeiten der Seite zu verk\u00fcrzen und die Bandbreitennutzung der Webseite<\/a> zu verringern. Das gr\u00f6\u00dfte Anliegen ist jedoch, den Code zu minimieren, ohne die Funktionalit\u00e4t zu ver\u00e4ndern.<\/p>\n

Code-Minifizierung ist in allen wichtigen Programmiertechnologien m\u00f6glich, einschlie\u00dflich HTML<\/a>, CSS<\/a> und – wie wir gleich sehen werden – JavaScript. Der Prozess geht jedoch nicht von heute auf morgen. Es bedarf einiger Arbeit, um den Code kompakter zu machen, ohne dass er seine Funktionalit\u00e4t verliert.<\/p>\n

Um JavaScript-Code zu minifizieren, musst du ihn parsen, komprimieren und die Ausgabe erhalten. Nach der Komprimierung sollte der Code f\u00fcr das blo\u00dfe Auge fast unlesbar sein. Du hast alle unn\u00f6tigen Leerzeichen, Kommentare, Zeilenumbr\u00fcche und alles, was den Code urspr\u00fcnglich lesbar gemacht hat, entfernt.<\/p>\n

M\u00f6glicherweise musst du noch weitere \u00c4nderungen am Code vornehmen, z. B. das Inlining von Funktionen, das Entfernen von Blockbegrenzern, die Verwendung impliziter Konditionale oder das Umschreiben lokaler Variablen.<\/p>\n

Unminified vs. Minified JavaScript Code Beispiele<\/h3>\n

Werfen wir einen Blick auf ein Codebeispiel. Der erste Block ist normales, nicht minimiertes JavaScript:<\/p>\n

\/\/ program to check if the string is palindrome or not\n\nfunction checkPalindrome(str) {\n\n    \/\/ find the length of a string\n    const len = string.length;\n\n    \/\/ loop through half of the string\n    for (let i = 0; i < len \/ 2; i++) {\n\n        \/\/ check if first and last string are same\n        if (string[i] !== string[len - 1 - i]) {\n            return 'It is not a palindrome';\n        }\n    }\n    return 'It is a palindrome';\n}\n\n\/\/ take input\nconst string = prompt('Enter a string: ');\n\n\/\/ call the function\nconst value = checkPalindrome(string);\n\nconsole.log(value);<\/code><\/pre>\n
Jetzt wollen wir sehen, wie derselbe Code aussieht, wenn er minimiert wurde:<\/p>\n
function checkPalindrome(n){const t=string.length;for(let n=0;n<t\/2;n++)\nif(string[n]!==string[t-1-n])return\"It is not a palindrome\";return\"It is a palindrome\"}\nconst string=prompt(\"Enter a string: \"), value=checkPalindrome(string);console.log(value);<\/code><\/pre>\n
Wie du sehen kannst, ist der zweite Codeblock viel kleiner und kompakter. Das bedeutet, dass er schneller geladen und gerendert wird, was die Ladezeit der Seite verk\u00fcrzt und den Inhalt beschleunigt.<\/p>\n
Hier haben wir 529 Bytes auf 324 Bytes reduziert, was 205 Bytes an freiem Speicherplatz bedeutet und die Ladezeit der Seite um fast 40% reduziert.<\/p>\n
Das ist so, als w\u00fcrde man ein 529-seitiges Buch zu einem 324-seitigen Buch komprimieren. Ein Mensch h\u00e4tte nat\u00fcrlich M\u00fche, es zu lesen, aber eine Maschine w\u00fcrde es ohne Probleme durchlesen.<\/p>\n
Wenn mehrere JavaScript-Dateien zu einer einzelnen Minified-Datei zusammengefasst werden, verringert sich durch die Code-Minifizierung die Anzahl der HTTP-Anfragen an den Server. Das senkt auch den Bandbreitenverbrauch der Webseite. Au\u00dferdem verk\u00fcrzt sich durch die Minifizierung des Codes die Zeit, die ein Skript zum Ausf\u00fchren ben\u00f6tigt – alles Dinge, die deine Time to First Byte (TTFB)<\/a> senken.<\/p>\n
Warum solltest du JavaScript-Code minifizieren?<\/h2>\n
Beim Schreiben des ersten Codes konzentrieren sich die meisten Entwickler\/innen in erster Linie darauf, die Dinge zu erledigen. Auf diesem Weg neigen sie dazu, viele Kommentare, Abst\u00e4nde und Variablen zu verwenden, um den Code f\u00fcr andere, die in Zukunft damit arbeiten, lesbarer zu machen.<\/p>\n
Obwohl JavaScript eine hervorragende Programmiersprache ist, wirkt es sich auf Webseiten aus, indem es sie verlangsamt. Um Platz zu gewinnen und die Ladegeschwindigkeit deiner Seite zu verbessern, musst du den JavaScript-Code minifizieren.<\/p>\n
Die verkleinerte Version des JavaScript-Codes kann die Dateigr\u00f6\u00dfe um bis zu 30-90% reduzieren. Deshalb ist das Minifizieren von JavaScript f\u00fcr alle Entwickler\/innen ein vertrautes Ritual geworden.<\/p>\n
Jeder gro\u00dfe Entwickler von JavaScript-Bibliotheken<\/a> (Angular, Bootstrap und so weiter) stellt eine minifizierte Version von JavaScript f\u00fcr den Produktionseinsatz bereit. Und jeder verwendet eine min.js-Erweiterung<\/strong>, um dies zu kennzeichnen.<\/p>\n
Vorteile des Minifying von JavaScript-Code<\/h3>\n
Im Folgenden findest du eine kurze \u00dcbersicht \u00fcber die Vorteile, die du durch die Minifizierung von JavaScript-Code erzielen kannst:<\/p>\n