extreme javascript compression with yui compressor
DESCRIPTION
Slides from the Yahoo! Front End Engineering Summit presentation on how to optimize JavaScript for best minification using YUI Compressor.TRANSCRIPT
![Page 1: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/1.jpg)
Extreme JavaScript Compression with YUI Compressor
Nicholas C. ZakasPrincipal Front End Engineer, Yahoo!
![Page 2: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/2.jpg)
Who's this guy?• Principal Front End Engineer, Yahoo! Front Page
• YUI Contributor• Author
![Page 3: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/3.jpg)
JavaScript Minification/Compression
• Problem: Lots of JavaScript• Solution: Make JavaScript smaller• Two areas:
– Wire weight– Browser weight
![Page 4: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/4.jpg)
Server
Wire Weight Solution: Gzip
Internet
![Page 5: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/5.jpg)
Browser
Wire Weight Solution: Gzip
Internet
![Page 6: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/6.jpg)
Browser Weight
![Page 7: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/7.jpg)
Browser Weight Solution: Minification• Remove comments• Remove extra white space• Identifier replacement• Other...
![Page 8: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/8.jpg)
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/
![Page 9: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/9.jpg)
YUI Compressor
http://developer.yahoo.com/yui/compressor/
![Page 10: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/10.jpg)
About YUI Compressor• Remove comments• Remove extra white space• Identifier replacement• Micro-optimizations• Built on top of Rhino interpreter
– Makes all optimizations safe
![Page 11: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/11.jpg)
Mozilla Rhino
• Open source JavaScript interpreter• Written in Java• Based on Firefox's interpreter
http://www.mozilla.org/rhino/
![Page 12: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/12.jpg)
How It Works
![Page 13: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/13.jpg)
Micro Optimizations
![Page 14: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/14.jpg)
The Results
-44%
-44%
![Page 15: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/15.jpg)
Helping the Compressor
![Page 16: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/16.jpg)
Best Optimization=
Identifier Replacement(aka munging)
![Page 17: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/17.jpg)
Identifier Replacement• Local identifiers only
– Functions and variables
![Page 18: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/18.jpg)
What Can't Be Replaced• Primitive values
– strings, booleans, numbers, null, and undefined
![Page 19: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/19.jpg)
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
![Page 20: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/20.jpg)
Primitive Values
263 b
172 b
![Page 21: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/21.jpg)
Primitive Values
293 b
162 b
![Page 22: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/22.jpg)
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
![Page 23: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/23.jpg)
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
![Page 24: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/24.jpg)
jQuery
![Page 25: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/25.jpg)
Primitive Variables
![Page 26: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/26.jpg)
What Can't Be Replaced• Primitive values
– strings, booleans, numbers, null, and undefined• Global variables
– window, document, XMLHttpRequest, etc.
![Page 27: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/27.jpg)
Global Variables• Most bytes:
– document– window
• Approach: Any global variable used two or more times should be stored into a local variable
![Page 28: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/28.jpg)
Global Variables
293 b
162 b
![Page 29: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/29.jpg)
Global Variables
317 b
162 b
![Page 30: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/30.jpg)
Prototype• 49 document = 392 bytes• 29 window = 174 bytes• Total globals = 566 bytes• Potential Savings > 500 bytes
![Page 31: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/31.jpg)
jQuery• 24 document = 192 bytes• 27 window = 162 bytes• Total globals = 354 bytes• Potential Savings > 300 bytes
![Page 32: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/32.jpg)
What Can't Be Replaced• Primitive values
– strings, booleans, numbers, null, and undefined• Global variables
– window, document, XMLHttpRequest, etc.• Property names
– foo.bar
![Page 33: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/33.jpg)
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
![Page 34: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/34.jpg)
Property Names
317 b
162 b
![Page 35: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/35.jpg)
Property Names
291 b
144 b
![Page 36: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/36.jpg)
What Can't Be Replaced• Primitive values
– strings, booleans, numbers, null, and undefined• Global variables
– window, document, XMLHttpRequest, etc.• Property names
– foo.bar• Keywords
![Page 37: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/37.jpg)
Keywords• Most commonly overused:
– var– return
• Approach: Try to have only one var statement and one return per function
![Page 38: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/38.jpg)
Keywords
291 b
144 b
![Page 39: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/39.jpg)
Keywords
308 b
127 b
![Page 40: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/40.jpg)
The Results
127 b
172 b
Before:
After:
Total Savings (from original) = 136 b (52%)Total Savings (from final) = 181 b (59%)
![Page 41: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/41.jpg)
Hurting the Compressor
![Page 42: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/42.jpg)
Preventing Identifier Replacement• Use of eval() function
![Page 43: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/43.jpg)
“eval() is evil”-Douglas Crockford
![Page 44: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/44.jpg)
eval() is Evil
![Page 45: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/45.jpg)
eval() is Evil
![Page 46: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/46.jpg)
Preventing Identifier Replacement• Use of eval() function
– Solution #1: Don't use it– Solution #2: Create a global function that wraps eval()
![Page 47: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/47.jpg)
Living with eval()
![Page 48: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/48.jpg)
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
![Page 49: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/49.jpg)
“with statement considered harmful”-Douglas Crockford
![Page 50: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/50.jpg)
with Statement
![Page 51: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/51.jpg)
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
![Page 52: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/52.jpg)
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
![Page 53: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/53.jpg)
Jscript Conditional Comments
![Page 54: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/54.jpg)
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
![Page 55: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/55.jpg)
The Compressor Helps You
![Page 56: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/56.jpg)
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)
![Page 57: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/57.jpg)
Verbose Mode
![Page 58: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/58.jpg)
Summary
![Page 59: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/59.jpg)
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
![Page 60: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/60.jpg)
http://developer.yahoo.com/yui/compressor/
![Page 61: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/61.jpg)
Questions?
![Page 63: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/63.jpg)
Happy crunching!
![Page 64: Extreme JavaScript Compression With YUI Compressor](https://reader035.vdocument.in/reader035/viewer/2022081400/55583973d8b42ac6078b4a80/html5/thumbnails/64.jpg)
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/