Mit JavaScript-Minifiern Netzwerkressourcen schonen

Code kompakt
Kommentare

Eines der größten Probleme bei der Webentwicklung ist der Umgang mit Ressourcen. Und nein, Sie erfahren heute nichts über Green-IT und wie Sie die Stromkosten Ihrer Server durch Webentwicklung spürbar senken. Stattdessen erfahren Sie in diesem Artikel, wie Sie schonender mit der Ressource Netzwerk umgehen können.

Bei der Datenübertragung kommt die Datenkompression zum Einsatz. Wikipedia definiert dies folgendermaßen: „Die Datenkompression oder Datenkomprimierung ist ein Vorgang, bei dem die Menge digitaler Daten reduziert wird. Dadurch sinkt der benötigte Speicherplatz und die Übertragungszeit der Daten verkürzt sich […] Grundsätzlich wird bei der Datenkompression versucht, überflüssige Informationen zu entfernen.“ – Genauso sollten Sie auch mit Ihrem JavaScript-Quellcode verfahren.

Sie können den Ladevorgang einer Webapplikation in verschiedene Phasen unterteilen. Zunächst wird die angefragte Seite vom Server heruntergeladen und dann vom Browser interpretiert. In den seltensten Fällen reicht für diesen Vorgang eine Anfrage an den Server aus. Stattdessen werden verschiedene Ressourcen, wie beispielsweise Style Sheets, Mediendateien wie Bilder oder aber JavaScript, nachgeladen und in die Seite eingebunden. Bei jeder dieser Anfragen nach einer zusätzlichen Datei entsteht zusätzlicher Overhead. An dieser Stelle kommen die JavaScript-Minifier zum Einsatz.

Wie so häufig im Bereich der Webentwicklung existieren hier zahlreiche Open-Source-Lösungen, die Sie für Ihre Webapplikation einsetzen können. Hier stellt sich jedoch die Frage, welches Werkzeug Sie verwenden sollten.

Was sind und wozu dienen Minifier?

Minifier kommen im Allgemeinen zum Einsatz, wenn es darum geht, die Größe der auszuliefernden Dateien zu verringern. Im konkreten Fall von JavaScript-Quellcode bedeutet das in erster Linie das Entfernen von unnötigen Zeichen. Nehmen Sie beispielsweise die unkomprimierte Version von jQuery – diese beinhaltet allein beinahe 9 000 Zeilenumbrüche. Sie haben in der Regel keine direkten Auswirkungen auf die Ausführung des Quellcodes und können aus diesem Grund entfernt werden. Das ist jedoch nur eine von zahlreichen Möglichkeiten, die für die Komprimierung von JavaScript-Quellcode zur Verfügung stehen. Die wichtigste Eigenschaft hierbei ist, dass die Funktionsfähigkeit Ihres Quellcodes vollständig erhalten bleiben muss.

Ein weiteres Einsatzgebiet von Minifiern ist die Zusammenfassung von JavaScript-Dateien. Dies dient vor allem der Reduzierung der Anzahl der Anfragen an den Server. In den meisten Fällen besteht die Zusammenführung von Dateien aus einer einfachen Verkettung der Dateien. Das bedeutet, dass Sie diesen Effekt auch ganz einfach ohne Werkzeugunterstützung erreichen können. Der Vorteil liegt darin, dass Sie dem Minifier eine Liste von Dateien angeben und sich das Werkzeug um alles Übrige kümmert.

Obfuscation, also die Verschleierung Ihres Quellcodes, ist der dritte Grund, warum Sie einen Minifier einsetzen sollten. Ihr JavaScript-Quellcode wird vollständig zum Benutzer übertragen. Das bedeutet, dass jeder, der Zugriff auf Ihren Server hat, diesen Code lesen kann. Verwenden Sie an dieser Stelle einen Minifier, wird es schwieriger, den Quellcode zu lesen und zu verstehen. Es existieren jedoch auch Programme, die Ihnen aus komprimiertem JavaScript-Quellcode wieder lesbaren Quellcode erzeugen.

Ein weiteres Merkmal von JavaScript Minifiern erschwert es trotz aller Werkzeuge, solchen Quellcode zu lesen. Um den Speicherbedarf weiter zu verringern, bieten zahlreiche Minifier die Option, den Quellcode selbst zu verändern. Ein klassisches Beispiel hierfür ist das Verkürzen von Variablennamen. So wird aus einer Variable mit dem Namen firstname beispielsweise die Variable a. Neben diesen drei Merkmalen können Sie die Auswahl des passenden Werkzeugs noch von einer Vielzahl weiterer Aspekte, wie beispielsweise der Verfügbarkeit auf bestimmten Systemen oder der Integrierbarkeit des Werkzeugs in Ihre Arbeitsumgebung, abhängig machen. In den folgenden Abschnitten lernen Sie einige JavaScript Minifier und deren Besonderheiten kennen.

JavaScript Minifier in unserer „Code kompakt“-Serie

Dies ist der erste Teil der siebenteiligen Serie „Code-Kompakt – JavaScript-Minifier“. Heute Nachmittag beginnen wir mit der Vorstellung des ersten Minifiers, UglifyJS. Danach gibt es jeweils werktags fünf Tage lang weitere Informationen zu den verschiedenen Minifiern, bevor nächste Woche der abschließende Teil zum Thema „Automatisierung“ erscheint. Eine Übersicht über alle Teile der Reihe findet sich in unserer Serie.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -