1. Extreme JavaScript Compression with
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. Browser Weight

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

8. 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/

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

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
• Open source JavaScript interpreter
• Written in Java
• Based on Firefox's interpreter
http://www.mozilla.org/rhino/

12. How It Works

13. Micro Optimizations

14. The Results
-44%
-44%

15. Helping the Compressor

16. Best Optimization
=
Identifier Replacement
(aka munging)

17. Identifier Replacement
• Local identifiers only
– Functions and variables

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

19. 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

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. jQuery

25. Primitive Variables

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

27. Global Variables
• Most bytes:
– 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 Be Replaced
• Primitive values
– strings, booleans, numbers, null, and undefined
• Global variables
– window, document, XMLHttpRequest, etc.
• Property names
– foo.bar

33. 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

34. Property Names
317 b
162 b

35. Property Names
291 b
144 b

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

37. Keywords
• Most commonly overused:
– 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. Hurting the Compressor

42. Preventing Identifier Replacement
• Use of eval() function

43. “eval() is evil”
-Douglas Crockford

44. eval() is Evil

45. eval() is Evil

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

47. Living with eval()

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. “with statement
considered harmful”
-Douglas Crockford

50. with Statement

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. Jscript Conditional Comments

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. The Compressor Helps You

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. Verbose Mode

58. Summary

59. 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

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

61. Questions?

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

63. Happy crunching!

64. 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/