Für meine Programmiertätigkeiten im Web nutze ich gelegentlich einige äußerst nützliche Helferlein im Netz. Es handelt sich dabei um kostenfreie Tools, die entweder bei der Fehlersuche, oder aber auch einfach bei der Vorbereitung zur Veröffentlichung eines Projekts nützlich sind.
Einige meiner liebsten Tools zum Thema Kompression von Skriptcode sowie Tester für Reguläre Ausdrücke möchte ich in diesem Beitrag kurz vorstellen und zur Nutzung empfehlen.
Kompression von Quellcode
Das Zeitalter der Kompilierung scheint im Web oftmals vorbei zu sein, liegen doch Skriptsprachen wie PHP und JavaScript ganz weit vorne, wenn es um Webanwendungen geht. Skriptbasierte Sprachen haben große Vorteile, bringen aber auch eine Reihe von Nachteilen mit sich.
Die Programme sind deutlich größer, da sie für den Menschen geschaffen sind, der diese lesen und schreiben muss. Üblicherweise wandelt ein Compiler den Quellcode in eine Maschinensprache (den Binärcode) um, mit der ein Computer “besser” umgehen kann. Bei Skriptsprachen geschieht dies allerdings nicht, bzw. nur bei Bedarf. Im Endeffekt sind dadurch die Programme in ihrem Speicherbedarf groß.
Im Falle von JavaScript (und auch HTML und CSS, was keine Programmiersprachen im eigentlichen Sinne sind) wird der Quellcode also so über das Netz transferiert, wie der Entwickler ihn verfasst hat: mit Leerzeichen, Kommentaren, Absätzen und sprechenden Variablen- und Funktionsbezeichnern.
Dem Browser, bzw. Computer, der diese Informationen auswerten muss ist die ansprechende Formatierung des Quellcodes völlig gleich. Eher im Gegenteil muss er diese Elemente herausfiltern und ignorieren, was in den meisten Fällen dank der heutigen Rechenleistung kaum auffällt.
Allerdings müssen diese “großen” Dateien auch über das Netz übertragen und in Zeiten von verschlüsselter Datenübertragung zudem noch chiffriert und dechiffriert werden. Auch hier gilt: je umfangreicher die Daten, desto länger dauert dies.
Grund genug also als Entwickler den Code einmal etwas aufzupeppen und um 50 bis 80 % schrumpfen zu lassen.
Bei jeder Verwendung solcher Kompressoren sollte allerdings berücksichtigt werden, dass der entstehende Code nahezu unlesbar für einen Menschen ist. Seinen Quellcode sollte man also sichern und nicht durch die geschrumpfte Variante zu ersetzen versuchen …
JavaScript eindampfen
Für JavaScript bietet sich hier JSCompress, das JavaScript Kompressionstool, an. Per Copy&Paste oder Dateiupload liefert man hier seinen Quelltext ein und erhält anschließend die verkleinerte Version. Das webbasierte Tool setzt dabei wiederum auf einige bekannte Open Source Tools wie UglifyJS 3 und babel-minify.
Wie der Name des ersten Tools, UglifyJS, bereits verrät, ist das Resultat nach der Kompression optisch nicht unbedingt ansprechend – aber dies soll es ja auch nicht sein, schließlich ist die verkleinerte Form ja auch nur für den Computer gedacht.
Effektiv werden alle Leerzeichen und Zeilenumbrüche sowie Kommentare entfernt. Private Variablen- und Funktionsbezeichner werden durch kürzere ausgetauscht und einige Konstrukte durch vereinfachte Implementierung ersetzt.
Der folgende JavaScript Code stellt eine Funktion dar, mit dem überprüft werden kann, ob das übergebene Jahr ein Schaltjahr ist.
/**
* Prüfung, ob das übergebene Jahr ein Schaltjahr ist
*
* @param int year Jahr das geprüft werden soll. Default: 0=aktuelles Jahr
* @return int 1=Schaltjahr, 0=kein Schaltjahr
*/
function leapyear(year) {
if (typeof year === 'undefined' || !year) {
var year = new Date();
year = year.getFullYear();
}
return !(year%4 != 0 || (year%100 == 0 && year%400 != 0));
}Nach der Komprimierung sieht das Resultat dann wie folgt aus:
function leapyear(e){return void 0!==e&&e||(e=(e=new Date).getFullYear()),!(e%4!=0||e%100==0&&e%400!=0)}Für dieses kurze Beispiel in dem zudem auch noch ein großer Kommentarblock enthalten ist, wurde eine Einsparung von fast 73 % erzielt. In der Regel erziele ich hier eine Kompression von mindestens 50 %.
Ein kleiner Nebeneffekt dieser Lösung ist, dass auch ich als Programmiere oft Tricks entdecke, wie ein Stück Code – ohne übertrieben unverständlich zu werden – knapper formuliert werden kann.
CSS verkleinern
Was bei JavaScript funktioniert, lässt sich auch mit CSS realisieren. Auch hier sind oftmals Kommentare, Leerzeichen und Co. enthalten, die das eigentliche CSS massiv aufblähen. Um auch hier die Luft raus zu lassen, bietet sich beispielsweise CSS Minifier an.
Die Funktionsweise entspricht dem JSCompressor, geht allerdings auch noch einen Schritt weiter, indem es sogar eine API anbietet. Auf diese Weise könnte man die Verkleinerung seiner CSS Dateien auch automatisieren.
CSS Code bietet (wie auch HTML) vergleichsweise wenig Spielraum zu Kompression. Mein relativ wenig kommentierter, allerdings mit zahlreichen zu Testzwecken “auskommentierten” Bereichen versehener CSS Code für eines meiner Projekte, schrumpfe ich auf diese Weise um immerhin rund 30 % ein.
HTML schrumpfen
Da ich HTML Code in meinen Projekten in der Regel dynamisch erzeuge, ist eine toolbasierte Kompression hier eher weniger angezeigt. Hierzu gibt es zwar auch geeignete Tools (z. B. HTMLcompressor), die ich allerdings aus besagten Gründen nicht verwende. Testweise konnte ich hier aus der Startseite eines meiner Projekte noch einmal 14 % einsparen.
Da die meisten HTML Seiten allerdings dynamisch erzeugt werden, so z. B. im Rahmen eines Content Management Systems wie WordPress, bieten sich hier andere Tools an, die sich um die Kompression kümmern. Zumeist sind diese in den etablierten Cache Plugins enthalten. Deren Einsatz sollte man allerdings genau überdenken, da sie bei von der Besucherzahl her kleineren Webseiten oder auch schwächeren Servern kaum Vorteile bringen.
