Closure Compiler:
Speeding Web Appications by Compiling
JavaScript
Alan Leung, Software Engineer, Google
Outline
What is it and what does it do?
More advanced usage
How do I get started?
Questions?
Building Large Scale Web Applications
Faster websites = more business and traffic!
Our apps are big, and our teams are large
How do we decrease latency with 100KLOC webapps?
How do we share functionality in a library without code bloat?
How do we help developers catch bugs sooner?
How do we help projects with hundreds of developers?
What is Closure Compiler?
Source-To-Source Javascript Compiler
Closure Compiler do more than Javascript minifications
Leveraged compiler optimizations and static analysis
techniques
Integrated a static type system in a dynamic language
Introduce a module loading system and optimizations for it
Open sourced!!!!
Who uses it?
Google Web Search, Gmail, Google Docs, Google
Spreadsheets, Google Presentation, Calendar, Blogger
Google Maps, Google Books, Google Analytics, Google
Finance ...
Externally: used by JQuery and growing!
Productivity!
Detect Errors Before Runtime
Variable Checks
Property Checks
Control Flow Structure Checks
Browser Specific Quirks
Many more to help you detect errors before it
happens!
Type Check and Type Inference
/** @constructor */
function Apple() {}
/** @param {Apple!} a */
function store(a) {}
Type Check and Type Inference
/** @constructor */
function Apple() {}
/** @param {Apple!} a */
function store(a) {}
var x = getRandomFruit();
if (x instanceof Apple) {
var y = x;
....
store(y);
}
Performance!
Example Compression:
Closure's Date Picker Example
File Sizes for Date Picker Example
Original Compression: Compression: Compression:
Whitespace Simple Advanced
Uncompressed 701 KB 351 KB (50%) 301 KB (58%) 33 KB (95%)
size (0%)
Gzip size 146 KB 61 KB (58%) 55 KB (62%) 12 KB (92%)
(0%)
Time to load page 800 ms 700 ms 474 ms
Lots of Optimizations
Lots of Optimizations
Rename Variables Alias Strings
Rename Properties Alias Keywords
Rename Labels Collapse Properties
Inline Functions Devirtualize Functions
Inline Variables Side Effect Computations
Optimize Arguments Rewrite Common Functions
Chain Calls Coalesce Variable Names
Remove Dead Code .... MANY MORE!!!!
Remove Dead Assignments
Remove Unused Variables
Remove Unused Properties
Lots of Optimizations
~30% Renaming
~30% Inlining
~15% Dead Code
Examples of Optimizations:
Constant Folding
if (x < (lineLength - (ellipsisLength * 2))) {
becomes
if (x < 74) {
Examples of Optimizations:
Coalesce Variable Names
myVar = 3; otherVar = myVar + c; fVar = otherVar++;
becomes
a =3; a = a + c; a++;
Examples of Optimizations:
Function Inlining
function fieldValue() {
return field + offset;
}
y = fieldValue();
becomes
y = field + offset;
Examples of Optimizations:
Simple Common Subexpression
[Link].bar1 = ....
[Link].bar2 = ....
becomes
t = [Link];
t.bar1 = ...
t.bar2 = ...
Examples of Optimizations:
Collapse Properties
[Link] = function() { ....
[Link]();
becomes
goog$ui$messages$foo = function () { ...
goog$ui$messages$foo();
becomes (with Variable Renaming)
a = function() {.,..
a();
Cool Optimizations:
Cross-module Code Motion
Modules
Cross Module Code motion
// Init Mod
function Graph() { ... }
[Link] = function() { ... };
[Link] = function() { ... };
var g = new Graph();
// Render Mod
[Link]();
// Resize Mod
[Link]();
Cross Module Code motion
// Init Mod
function Graph() { ... }
[Link] = function() { ... };
[Link] = function() { ... };
var g = new Graph();
// Render Mod
[Link]();
// Resize Mod
[Link]();
Cross Module Code motion
// Init Mod
function Graph() { ... }
var g = new Graph();
// Render Mod
[Link] = function() { ... };
[Link]();
// Resize Mod
[Link] = function() { ... };
[Link]();
How to use Closure Compiler
Online (Interactive and REST API):
[Link]
How to use Closure Compiler
Download and use it:
java -jar [Link] --js [Link] --js_output_file [Link]
Sources, binaries, discussion and feature requests at:
[Link]
Questions