Downloaded 407 times
Uploaded byNicholas Zakas
Extreme JavaScript Compression With YUI Compressor
The document discusses JavaScript minification and compression techniques to reduce file sizes, focusing on the YUI Compressor developed by Nicholas C. Zakas. It highlights methods such as removing comments and whitespace, replacing identifiers, and emphasizes the importance of using local variables for optimization. The document advises against using certain features like eval() and the with statement to enable effective compression.
More Related Content
Similar to Extreme JavaScript Compression With YUI Compressor
Extreme JavaScript Compression With YUI Compressor
- 1. Extreme JavaScript Compressionwith YUI Compressor Nicholas C. Zakas Principal Front End Engineer, Yahoo!
- 2. Who's this guy? •Principal Front End Engineer, Yahoo! Front Page • YUI Contributor • Author
- 3. JavaScript Minification/Compression • Problem: Lots of JavaScript • Solution: Make JavaScript smaller • Two areas: – Wire weight – Browser weight
- 4. Wire Weight Solution:Gzip Internet Server
- 5. Wire Weight Solution:Gzip Internet Browser
- 6.
- 7. Browser Weight Solution:Minification • Remove comments • Remove extra white space • Identifier replacement • Other...
- 8. Minification Tools • ECMAScriptCruncher (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/
- 9.
- 10. About YUI Compressor • Remove comments • Remove extra white space • Identifier replacement • Micro-optimizations • Built on top of Rhino interpreter – Makes all optimizations safe
- 11. Mozilla Rhino • Opensource JavaScript interpreter • Written in Java • Based on Firefox's interpreter http://www.mozilla.org/rhino/
- 12.
- 13.
- 14. The Results -44% -44%
- 15.
- 16. Best Optimization = Identifier Replacement (aka munging)
- 17. Identifier Replacement • Localidentifiers only – Functions and variables
- 18. What Can't BeReplaced • Primitive values – strings, booleans, numbers, null, and undefined
- 19. Primitive Values • Stringstake 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
- 20. Primitive Values 263 b 172 b
- 21. Primitive Values 293 b 162 b
- 22. 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
- 23. 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
- 24.
- 25.
- 26. What Can't BeReplaced • Primitive values – strings, booleans, numbers, null, and undefined • Global variables – window, document, XMLHttpRequest, etc.
- 27. Global Variables • Mostbytes: – document – window • Approach: Any global variable used two or more times should be stored into a local variable
- 28. Global Variables 293 b 162 b
- 29. Global Variables 317 b 162 b
- 30. Prototype • 49 document = 392 bytes • 29 window = 174 bytes • Total globals = 566 bytes • Potential Savings > 500 bytes
- 31. jQuery • 24 document = 192 bytes • 27 window = 162 bytes • Total globals = 354 bytes • Potential Savings > 300 bytes
- 32. What Can't BeReplaced • Primitive values – strings, booleans, numbers, null, and undefined • Global variables – window, document, XMLHttpRequest, etc. • Property names – foo.bar
- 33. Property Names • Nextto 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
- 34. Property Names 317 b 162 b
- 35. Property Names 291 b 144 b
- 36. What Can't BeReplaced • Primitive values – strings, booleans, numbers, null, and undefined • Global variables – window, document, XMLHttpRequest, etc. • Property names – foo.bar • Keywords
- 37. Keywords • Most commonlyoverused: – var – return • Approach: Try to have only one var statement and one return per function
- 38. Keywords 291 b 144 b
- 39. Keywords 308 b 127 b
- 40. The Results Before: 172 b After: 127 b Total Savings (from original) = 136 b (52%) Total Savings (from final) = 181 b (59%)
- 41.
- 42. Preventing Identifier Replacement •Use of eval() function
- 43. “eval() is evil” -DouglasCrockford
- 44.
- 45.
- 46. Preventing Identifier Replacement •Use of eval() function – Solution #1: Don't use it – Solution #2: Create a global function that wraps eval()
- 47.
- 48. 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
- 49.
- 50.
- 51. 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
- 52. 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
- 53.
- 54. 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
- 55.
- 56. 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)
- 57.
- 58.
- 59. For Optimal FileSize • 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
- 60.
- 61.
- 62. Etcetera • My blog: www.nczonline.net • My email: nzakas@yahoo-inc.com • Twitter: @slicknet
- 63.
- 64. Creative Commons ImagesUsed • 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/