JavaScript Minifier

Methoden für die Minimierung von JavaScript

JavaScript gehört zu den beliebtesten Programmiersprachen. Mit seiner Hilfe können Webseiten responsiv, interaktiv und dynamisch gestaltet werden. Das Surfen auf Webseiten, die mit JavaScript entwickelt wurden, ist für User daher sehr angenehm.

Doch JavaScript kann nicht allein die Optik einer Webseite positiv beeinflussen. Auch das allgemeine Nutzererlebnis wird durch eine kürzere Ladezeit und eine generelle Beschleunigung der Webseite deutlich verbessert.

JavaScript kann dabei helfen, die Leistung einer Webseite zu erhöhen. Dafür muss man sich mit dem zentralen Konzept, der JavaScript-Minifizierung, vertraut machen. Um sowohl die Ladezeit als auch die Bandbreitennutzung der Webseite zu kürzen, werden dabei überflüssige Zeichen aus dem Code entfernt. So wird die Funktionalität der Webseite nicht verändert, das Webseiten-Erlebnis jedoch positiv beeinflusst. Dies stellt sowohl User als auch Suchmaschinen zufrieden.

Die Minifizierung eines JavaScript-Codes kann dabei durchaus mit Aufwand verbunden sein. Im Folgenden stellen wir zwei Methode zur Durchführung vor.

Über JavaScript

JavaScript ist eine objektorientierte Programmiersprache, die mit dem Ziel entwickelt wurde, Webentwicklung attraktiver und einfacher zu machen. Sie ermöglicht die Erstellung interaktiver Webseiten sowohl auf der Client- als auch auf der Serverseite. JavaScript ist ausdrucksstark, intuitiv, nicht besonders komplex und damit auch für Anfänger leicht zu erlernen. Aus diesem Grund ist JavaScript eine der beliebtesten Programmiersprachen im Bereich der Webentwicklung.

Mit HTML kann eine Website erstellt und mit CSS ihre Struktur (Layout, Typografie, Farben, Design) aufgebaut werden. Doch erst JavaScript macht eine statische HTML-Datei dynamisch. Durch komplexe Funktionen wie Videos und interaktive Karten wird die Website interaktiv und für User attraktiv.

JavaScript wird von allen gängigen Webbrowsern unterstützt und bildet zusammen mit HTML und CSS ein gutes Team für die Entwicklung von Websites.

Es lohnt sich also, JavaScript zu erlernen, da

• sie für Anfänger geeignet ist,
• damit attraktive, interaktive Webseiten erstellt werden können und
• es auf auf allen Browsern läuft

Code-Minifizierung

Code-Minifizierung (auch Code-Minimierung genannt), optimiert den Code, um

• Größe und Umfang des Quellcodes zu reduzieren,
• die Datenübertragung schneller und effizienter zu gestalten sowie
• die Bandbreitennutzung der Webseite zu verringern.

Bei der Minimierung darf die Funktionalität des Quellcodes nicht verändert werden.

Alle gängigen Programmiersprachen ermöglichen eine Code-Minifizierung, auch HTML, CSS und JavaScript. Den Code kompakter zu gestalten ohne dabei an Funktionalität einzubüßen, ist jedoch mit Aufwand verbunden.

Für eine erfolgreiche JavaScript-Minimierung muss der Code geparset, komprimiert und die Ausgabe erhalten werden. Dafür werden alle unnötigen Zeichen (zum Beispiel Leerzeichen, Blockbegrenzer, Kommentare, Zeilenumbrüche) aus dem Code entfernt. Sie machen den Code für den Entwickler lesbar, beeinflussen aber nicht die Funktionalität. Am Ende sollte der Code fast unlesbar sein.

Auch weitere Änderungen wie das Verkürzen langer Variablennamen oder das Inlining von Funktionen können angebracht sein.

Minimierter Code ist deutlich kürzer und kompakter als normaler Code. Dadurch wird er schneller geladen und gerendert. Der User kann sich über kürzere Ladezeiten und einen schnelleren Seiteninhalt freuen.

Durch die Zusammenfassung mehrerer JavaScript-Dateien zu einer einzelnen Minified-Datei werden weniger HTTP-Anfragen an den Server gestellt. Auf diesem Wege wird der Bandbreitenverbrauch der Webseite reduziert. Außerdem wird die Ausführzeit des Skripts gesenkt und damit auch die TTFB (Time to First Byte).  

Unminified vs. Minified JavaScript Code Beispiele

Der folgende Codeblock ist ein Beispiel für unminimiertes JavaScript:
 

// program to check if the string is palindrome or not

function checkPalindrome(str) {

    // find the length of a string
    const len = string.length;

    // loop through half of the string
    for (let i = 0; i < len / 2; i++) {

        // check if first and last string are same
        if (string[i] !== string[len - 1 - i]) {
            return 'It is not a palindrome';
        }
    }
    return 'It is a palindrome';
}

// take input
const string = prompt('Enter a string: ');

// call the function
const value = checkPalindrome(string);

console.log(value);

Jetzt wollen wir sehen, wie derselbe Code aussieht, wenn er minimiert wurde:
 

function checkPalindrome(n){const t=string.length;for(let n=0;n<t/2;n++)
if(string[n]!==string[t-1-n])return"It is not a palindrome";return"It is a palindrome"}
const string=prompt("Enter a string: "), value=checkPalindrome(string);console.log(value);

Gründe für die JavaScrip-Minifizierung

Gerade Anfänger, die zum ersten Mal mit JavaScript arbeiten, verwenden in ihrem Code viele Variablen, Abstände und Kommentare. Das ist verständlich, denn auf diese Weise wird nicht nur die eigene Arbeit übersichtlicher, sondern der Code auch lesbar für Entwickler, die in Zukunft damit arbeiten werden.

Doch die erhöhte Lesbarkeit des Codes wirkt sich direkt negativ auf die Geschwindigkeit der Webseite. JavaScript-Minifizierung ermöglicht es, den Code derart kompakt zu gestalten, dass die Dateigröße sich um 30 bis 90 % reduziert. Auf diesem Wege wird für eine deutlich schnellere Ladegeschwindigkeit der Webseite gesorgt.

Erfahrene und professionelle JavaScript-Entwickler stellen ganz selbstverständlich eine minifizierte Version ihrer Datei für den Produktionseinsatz bereit. Diese ist anhand ihrer min.js-Erweiterung zu erkennen.

Vorteile der JavaScript-Minifizierung

Der Gebrauch der JavaScript-Minifzierung lässt sich durch viele Vorteile begründen.

• beschleunigte Seitenladezeit
• verkürzte Skriptausführungszeit
• geringerer Bandbreitenverbrauch
• geringere Serverbelastung durch eine verringerte Zahl an HTTP-Anfragen
• Diebstahlschutz durch schwere Lesbarkeit

Java-Script-Minifzierung, -Uglifizierung und -Komprimierung

Die Minifizierung, Uglifizierung und Komprimierung von JavaScript-Code funktionieren ähnlich und werden daher häufig fälschlicherweise synonym verwendet. Die drei Methoden verfolgen jedoch unterschiedliche Ziele, die hier in Kürze vorgestellt werden sollen.  

JavaScript-Uglifizierung

Die JavaScript-Uglifzierung bedient sich ähnlicher Methoden wie die Minifzierung: Es werden unnötige Zeichen wie Leerzeichen, Kommentare und Semikolons entfernt. Zusätzlich werden jedoch auch Variablen und Inline-Funktionen mit neuen Namen versehen. Dieses Vorgehen soll den Code schwer lesbar und damit unattraktiv für Diebe machen. Uglifizierung zielt somit in erster Linie darauf ab, den Code sicherer zu machen. Gleichzeitig wird die Leistung des Codes verbessert. Dies ist in diesem Fall aber nur ein netter Nebeneffekt. Die Bibliothek UgflifyJS uglifiziert den Code automatisch.

JavaScript-Komprimierung

Bei der Komprimierung wird der Quellcode mit einem Komprimierungsalgorithmus (zum Beispiel GZIP) ins Binärformat umgeschrieben. Auf diese Weise wird die Größe des Codes massiv reduziert und seine Ladegeschwindigkeit signifikant erhöht.

Es ist möglich, sowohl die Minifizierung und als auch die Komprimierung rückgängig zu machen und den Code in seine ursprüngliche Form zurückzubringen. Uglifizierung ist jedoch irreversibel.

Methoden für die Minifzierung von JavaScript-Code

Es ist möglich, JavaScript-Code manuell zu minifizieren. Dafür wird die Datei in einem Texteditor geöffnet und nun alle überflüssigen Zeichen (zum Beispiel Leerzeichen und Kommentare) manuell entfernt. Dies kann einige Zeit dauern. Schneller geht es, wenn der Texteditor reguläre Ausdrücke unterstützt. Diese Methode ist jedoch sehr aufwendig und zeitintensiv und daher nur bei sehr kleinen Dateien zu empfehlen.

Es gibt Minification-Tools, die eine automatische Code-Minifizierung vornehmen. Um diese Möglichkeit zu nutzen, wird der zu minifizierende Code in das Minification-Tool eingefügt, das im Browser läuft. Diese Methode ist deutlich zeitsparender und besonders für große Daten zu empfehlen.