Googles
Closure Compiler

Martin Läuter
3. Juli 2014

Ziele

• weniger Bytes und Requests übers Netzwerk (nach gzip),
• Erleichterung der Skalierung auch großer JavaScript-Projekte,
• Wiederverwendung von Code in der Closure Library.

Features

• Dead Code Elimination, Minifizierung,
• Zusammenfassung mehrerer Quellfiles,
• Abhängigkeiten unter denen,
• Namespaces,
• Vererbung auf Basis von Klassen, Interfaces,
• Test-Framework.

Implementierung

• Java-Programm (open source, GitHub),
• bis kürzlich Parser von Rhino, jetzt eigener ES6-Parser,
• mehrere AST-Arten,
• mehrere Passes,
• JavaScript-Generator.

Drei Modi

JavaScript lässt zu viele Paradigmen zu, um für alle Programme beweisbar die Semantik gleich zu lassen.

Deshalb gibt es drei Modi, die unterschiedlich weit optimieren und entsprechend mehr oder weniger Kooperation des Entwicklers erfordern.

Man schreibt aber immer gültiges JavaScript, d. h. der Code läuft auch uncompiliert.

WHITESPACE

WHITESPACE

SIMPLE_OPTIMIZATION

ADVANCED_OPTIMIZATION

– entfernt nur Kommentare, überflüssige Kommas, Semikola, Leerzeichen, Zeilenenden.

• Es sind keine semantischen Änderungen zu erwarten (wenn man es nicht darauf anlegt),
• geringe Einsparung.

SIMPLE_OPTIMIZATION

WHITESPACE

SIMPLE_OPTIMIZATION

ADVANCED_OPTIMIZATION

– zus. kürzere lokale Bezeichner (Basisminifizierung).

• nur lokale Bezeichner geändert => keine Probleme bei Aufruf von Fremdcode,
• Feind: eval(),
• bedeutende Einsparung.

ADVANCED_OPTIMIZATION

WHITESPACE

SIMPLE_OPTIMIZATION

ADVANCED_OPTIMIZATION

– zus. globales Renaming, Dead Code Elimination, Inlining.

• Code wird wesentlich umgeschrieben,
• Kooperation des Entwicklers erforderlich,
• ABER: größte Einsparung.
• Einfluss auf Laufzeit ist unbestimmt.

Beispiel

function unusedFunction(note) {
  alert(note['text']);
}

function displayNoteTitle(note) {
  alert(note['title']);
}

var flowerNote = {};
flowerNote['title'] = "Flowers";
displayNoteTitle(flowerNote);

Ausgabe

SIMPLE_OPTIMIZATION

function unusedFunction(a){alert(a.text)}function d
isplayNoteTitle(a){alert(a.title)}var flowerNote={t
itle:"Flowers"};displayNoteTitle(flowerNote);

ADVANCED_OPTIMIZATION

alert("Flowers");

Wie sieht die Kooperation aus?

• Verwende/exportiere Code, den Du brauchst!
• window['displayNoteTitle'] = displayNoteTitle;
• eval() nur, wenn Du weißt, was Du tust!
• Greife auf Properties immer gleich zu!
• memb['name']='Mrs. '+memb.name;
• memb.id=++lastId;
• Compile Code immer zusammen!

Wie sieht die Kooperation aus? II

• Deklariere Externs, wenn Du Symbole von externem Code brauchst!
• function textDiv(text){}; in einem Extern-File.
• Der Bezeichner wird so nie ersetzt.
• Sonst wird aus opensocial.newDataRequest() nach Umbenennung a.a().
• gibt es für viele verbreitete APIs.
• Exports komprimieren besser.

Das Ökosystem

• Closure Compiler
• Closure Linter
• wacht über die Einhaltung von Googles Style Guide.
• Closure Library
• Event-System, UI-Komponenten, Utilities, Polyfills, i18n, Grafik, Rich Text Editor,
• Closure Templates
• generiert sicheren Code für die Erzeugung von HTML.

Namespaces

In der CL heißen die Methoden goog.dom.create(). Namespaces können requiret goog.require('myNS'); und providet goog.provide('myNS');werden.

var foo = {};
foo.bar = function (a) { this.bad = a; }; // BAD
foo.bar("hello");

var foo$bar = function (a) { this.bad = a; };
foo$bar("hello");

Anwendungen

Der Closure Compiler ist also ein JS-JS-Transpiler.

• als Minifizierer z. B. als letzte Stufe eines Compilers (GWT, CoffeeScript, Haste), inkl. Source Maps,
• als Linker für multi-file JavaScript-Projekte,
• als Typprüfer, wenn der Code entsprechend annotiert wurde.

Trivia

• 13mal langsamer als UglifyJS, packt aber etwas besser.
• ausgezeichnetes Buch: Closure: The Definitive Guide (Michael Bolin).
• Code Splitting geht.

Gibt es Fragen?

Link zur Präsentation www.laeuter.de/martin/jstalk/jstalk.html