Komprimiertes JavaScript unter Kontrolle: Source Maps

Haben Sie schon einmal versucht, den Fehler in Zeile 1 der Datei app.js zu finden, wenn diese Datei aus nur einer Zeile mit einer Zeilenlänge von etlichen tausend Zeichen besteht und weder über vernünftig gesetzte White Spaces noch über Kommentare verfügt? Wartungsfreundlich und gut lesbar ist ein so optimierter Quellcode sicherlich nicht. Zur Hilfe kommt Ihnen hier das Konzept der Source Maps.

Neben Tests und Codeanalyse gehört auch das Komprimieren von Quellcode zum guten Stil bei der Entwicklung von JavaScript-Applikationen. Bei der Komprimierung werden überflüssige Leerzeichen und Kommentare entfernt und damit Speicherplatz gespart, was sich auch positiv auf die Übertragung der Daten auswirkt. Auch die verwendeten Variablen lassen sich dabei verkürzen. So wird aus einer Variablen mit dem Namen „result“ beispielsweise eine Variable „a“. All das geschieht mit dem Ziel, Bandbreite bei der Übermittlung der Daten zu sparen.

Bei der Komprimierung von JavaScript-Quellcode gilt es jedoch nicht nur die benötigte Bandbreite zu reduzieren, es soll außerdem die Zahl der erforderlichen Requests an den Sever so klein wie möglich gehalten werden, sodass im Idealfall der gesamte JavaScript-Quellcode für Ihre Applikation mit einer Anfrage geladen werden kann. Und genau hier entsteht dann das eigentliche Problem. Sie liefern Ihre JavaScript-Applikation in einer Datei ohne Kommentare, Leerzeichen und mit reduzierten Variablennamen aus.

Sie können hier allerdings auf das System der Source Maps zurückgreifen, um eine komprimierte JavaScript-Datei mit deren unkomprimiertem Original zu verbinden. Damit das funktionieren kann, ist eine weitere Datei, die eigentliche Source Map, erforderlich. Sie bildet die Schnittstelle zwischen beiden Welten. Für einen praktischen Einsatz von Source Maps müssen Sie auch nicht lange suchen. jQuery hat bei der minifizierten Version seiner Bibliothek standardmäßig die Unterstützung für Source Maps aktiviert. Aber wie erreicht man nun eine solche Unterstützung?

/*! jQuery v2.0.3 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license
//@ sourceMappingURL=jquery.min.map
*/

Im komprimierten Quellcode wird einfach ein Kommentar eingefügt. Er beinhaltet eine Zeile mit dem Schlüsselwort sourceMappingURL. Das Format mit //@ ist vorgeschrieben. Die von jQuery verwendete Schreibweise mit dem @-Zeichen wird jedoch nicht empfohlen, da sie mit einer vom Internet Explorer unterstützten Direktive in Konflikt steht. Stattdessen sollte das Format //# verwendet werden.

Nutzen Sie die von jQuery zur Verfügung gestellte minifizierte Version und stellen auf Ihrem Server die entsprechende Map-Datei nicht zur Verfügung, kommt es zu einem unschönen Seiteneffekt: Der Browser versucht die Map-Datei vom Server zu laden und erhält vom Server eine Fehlermeldung. Möchten Sie diese Fehlermeldung umgehen, müssen Sie entweder die Map-Datei zur Verfügung stellen, oder den Verweis auf die Map-Datei aus dem Quellcode entfernen.

Wie nutzt man Source Maps?

Liegen alle erforderlichen Dateien, also sowohl der komprimierte Quellcode mit einem Verweis auf die Source Map, als auch die Source Map selbst und der unkomprimierte Quellcode auf dem Server, und werden diese korrekt ausgeliefert, können Sie die Source Map verwenden. Wie bei so vielen Technologien im Webumfeld, gibt es aber auch bei Source Maps Einschränkungen. So können Sie in aktuellen Versionen der Firefox- und Chrome-Browser bedenkenlos auf dieses Feature zurückgreifen. Benutzer des Internet Explorers haben hier allerdings schlechte Karten, da der Browser diese Technologie nicht unterstützt.

Am einfachsten verwenden Sie die Source Maps, indem Sie Breakpoints in Ihrem Browser verwenden. Breakpoints sind Stellen in Ihrem JavaScript-Quellcode, an denen der Debugger Ihres Browsers den Programmablauf unterbricht und Ihnen einen Blick in die aktuelle Laufzeitumgebung Ihrer Applikation ermöglicht. Einen solchen Breakpoint setzen Sie beispielsweise in Chrome in den Entwickler-Tools im Tab „Source“. Hier haben Sie die Möglichkeit, aus allen geladenen Dateien einer Webseite auszuwählen und den jeweiligen Quellcode anzuzeigen.

Durch die Source Maps werden hier nicht nur die minifizierten Dateien angezeigt, sondern auch die zugehörigen Originale. Setzen Sie nun in einer solchen Originaldatei einen Breakpoint und laden die Seite neu, hält die JavaScript-Engine Ihres Browsers an genau dieser Stelle die Ausführung der JavaScript-Logik an und gewährt Ihnen einen Blick in die Umgebung Ihrer Applikation. Sie können dann sämtliche Variablen inspizieren oder Watch-Expressions definieren, um die Belegung bestimmter Variablen zu beobachten. Über den Debugger des Browsers können Sie dann die Ausführung fortsetzen oder schrittweise durch die Ausführung Ihrer Applikation springen. Dies alles können Sie im lesbaren Original-Quellcode durchführen.

Wie erstellt man eigene Source Maps?

Nun wollen Sie bestimmt aber nicht nur jQuery oder andere Bibliotheken und Frameworks in ihrer minifizierten Version verwenden, sondern auch Ihren eigenen Quellcode auf seinen Speicherbedarf und die benötigten Requests hin optimieren. Zu diesem Zweck können Sie auf zahlreiche Bibliotheken zurückgreifen. Unter anderem können Sie mit UglifyJS sämtliche JavaScript-Dateien Ihrer Applikation zu einer Datei zusammenfassen und komprimieren. UgilfyJS ermöglicht es Ihnen außerdem, sämtliche verwendete Variablen zu verkürzen. Ein weiteres Feature von UglifyJS ist, dass es Sie bei der Generierung von Source Maps unterstützt.

Um UglifyJS benutzen zu können, benötigen Sie Node.js. Danach können Sie über den Node Package Manager UglifyJS auf Ihrem System mit dem Kommando npm install uglify-js -g installieren. Angenommen Sie haben eine Datei app.js und eine weitere Datei validator.js, können Sie folgendes Kommando verwenden, um diese beiden Dateien zusammenzufassen und zu optimieren:

uglifyjs -m --source-map app.map.js --output app.min.js app.js validator.js

Als Ergebnis der Operation erhalten Sie die Datei app.min.js, die den minifizierten Quellcode der beiden Eingabedateien enthält, und die Datei app.map.js, die das Mapping zwischen der minifizierten Datei und den Originaldateien beinhaltet. Um den Quellcode in Ihrer Applikation verwenden zu können, müssen Sie lediglich die Datei app.min.js einbinden. Ein Verweis auf die zugehörige Source Map ist in der Datei app.min.js bereits enthalten.

Ausblick

Mit Source Maps können Sie als Entwickler einen Blick in Ihren komprimierten JavaScript-Quellcode zur Fehlersuche werfen. Durch die Unterstützung von Werkzeugen ist die Erstellung und Verwendung von Source Maps ein Leichtes und verursacht kaum zusätzlichen Aufwand.

Trotz allem Komfort und allen Vorteilen, weisen die Source Maps auch ein paar Nachteile auf. Wollen Sie Source Maps für Ihre Applikation nutzen, müssen Sie neben den komprimierten auch die nicht komprimierten Dateien Ihren Benutzern zur Verfügung stellen. Ein weiterer Nachteil besteht darin, dass Source Maps nicht von allen Browsern, wie beispielsweise dem Internet Explorer, unterstützt werden. Auch funktioniert die Auflösung von verkürzten Variablen zu den Originalen nicht befriedigend, sodass Sie keine Watch-Expressions auf die Originalvariablen erstellen können.