Extreme JavaScript Compression with YUI
Compressor Nicholas C. Zakas Principal Front End Engineer, Yahoo!

Who's this guy? • Principal
Front End Engineer, Yahoo! Front Page • YUI Contributor • Author

JavaScript Minification/Compression • Problem: Lots
of JavaScript • Solution: Make JavaScript smaller • Two areas: – Wire weight – Browser weight

Wire Weight Solution: Gzip Internet
Server

Wire Weight Solution: Gzip Internet
Browser

Browser Weight

Browser Weight Solution: Minification •
Remove comments • Remove extra white space • Identifier replacement • Other...

Minification Tools • ECMAScript Cruncher
(ESC) – http://www.saltstorm.net/depo/esc/ • JSMin – http://www.crockford.com/javascript/jsmin.html • Packer – http://dean.edwards.name/packer/ • Dojo Shrinksafe – http://shrinksafe.dojotoolkit.org/

YUI Compressor
http://developer.yahoo.com/yui/compressor/

About YUI Compressor • Remove
comments • Remove extra white space • Identifier replacement • Micro-optimizations • Built on top of Rhino interpreter – Makes all optimizations safe

Mozilla Rhino • Open source
JavaScript interpreter • Written in Java • Based on Firefox's interpreter http://www.mozilla.org/rhino/

How It Works

Micro Optimizations

The Results
-44%
-44%

Helping the Compressor

Best Optimization = Identifier Replacement
(aka munging)

Identifier Replacement • Local identifiers
only – Functions and variables

What Can't Be Replaced •
Primitive values – strings, booleans, numbers, null, and undefined

Primitive Values • Strings take
up the most space • Non-numeric literals take second-most – true, false – null – undefined • Approach: Any literal value used two or more times should be stored in a local variable

Primitive Values 263 b 172
b

Primitive Values 293 b 162
b

Prototype • 79 repeated strings
= 1196 bytes • 80 true/false = 359 bytes • 44 null = 176 bytes • 21 undefined = 189 bytes • Total primitives = 1920 bytes • Potential savings > 1 kb

jQuery • 96 repeated strings
= 1742 bytes • 107 true/false = 478 bytes • 46 null = 184 bytes • Total primitives = 2404 bytes • Potential savings > 1.3 kb • undefined = negligible

jQuery

Primitive Variables

What Can't Be Replaced •
Primitive values – strings, booleans, numbers, null, and undefined • Global variables – window, document, XMLHttpRequest, etc.

Global Variables • Most bytes:
– document – window • Approach: Any global variable used two or more times should be stored into a local variable

Global Variables 293 b 162
b

Global Variables 317 b 162
b

Prototype • 49 document =
392 bytes • 29 window = 174 bytes • Total globals = 566 bytes • Potential Savings > 500 bytes

jQuery • 24 document =
192 bytes • 27 window = 162 bytes • Total globals = 354 bytes • Potential Savings > 300 bytes

What Can't Be Replaced •
Primitive values – strings, booleans, numbers, null, and undefined • Global variables – window, document, XMLHttpRequest, etc. • Property names – foo.bar

Property Names • Next to
repeated strings, biggest source of extra bytes • Anything to the right of a dot cannot be replaced • Makes a.b.c even more expensive • Approach: Any property used two or more times should be stored into a local variable

Property Names 317 b 162
b

Property Names 291 b 144
b

What Can't Be Replaced •
Primitive values – strings, booleans, numbers, null, and undefined • Global variables – window, document, XMLHttpRequest, etc. • Property names – foo.bar • Keywords

Keywords • Most commonly overused:
– var – return • Approach: Try to have only one var statement and one return per function

Keywords
291 b
144 b

Keywords
308 b
127 b

The Results Before: 172 b
After: 127 b Total Savings (from original) = 136 b (52%) Total Savings (from final) = 181 b (59%)

Hurting the Compressor

Preventing Identifier Replacement • Use
of eval() function

“eval() is evil”
-Douglas Crockford

eval() is Evil

eval() is Evil

Preventing Identifier Replacement • Use
of eval() function – Solution #1: Don't use it – Solution #2: Create a global function that wraps eval()

Living with eval()

Preventing Identifier Replacement • Use
of eval() function – Solution #1: Don't use – Solution #2: Create a global function that wraps eval() • Use of with statement

“with statement considered harmful” -Douglas
Crockford

with Statement

Preventing Identifier Replacement • Use
of eval() function – Solution #1: Don't use – Solution #2: Create a global function that wraps eval() • Use of with statement – Solution #1: Don't use – Solution #2: see Solution #1

Preventing Identifier Replacement • Use
of eval() function – Solution #1: Don't use – Solution #2: Create a global function that wraps eval() • Use of with statement – Solution #1: Don't use – Solution #2: see Solution #1 • JScript conditional comments

Jscript Conditional Comments

Preventing Identifier Replacement • Use
of eval() function – Solution #1: Don't use – Solution #2: Create a global function that wraps eval() • Use of with statement – Solution #1: Don't use – Solution #2: see Solution #1 • JScript conditional comments – Only solution: Don't use

The Compressor Helps You

Verbose Mode • Use -v
switch to enable • Reports issues with code related to minification: – Undeclared variables – Unused variables – Functions with more than one var statement – Use of evil features (eval(), with, conditional comments)

Verbose Mode

Summary

For Optimal File Size •
Use local variables to store: – Repeated primitive values – Global variables – Object properties • Limit each function to one var and one return • Avoid using eval() and with() • Heed YUI Compressor's advice • Combine with HTTP compression for best savings

http://developer.yahoo.com/yui/compressor/

Questions?

Etcetera • My blog: www.nczonline.net
• My email: nzakas@yahoo-inc.com • Twitter: @slicknet

Happy crunching!

Creative Commons Images Used •
http://flickr.com/photos/velkr0/467471030/ • http://flickr.com/photos/oskay/253010234/ • http://flickr.com/photos/pacfolly/2304020816/ • http://flickr.com/photos/blmurch/304690615/ • http://flickr.com/photos/tshirbert/191179745/ • http://flickr.com/photos/mc/27061495/ • http://flickr.com/photos/oberazzi/318947873/