Slides from the Yahoo! Front End Engineering Summit presentation on how to optimize JavaScript for best minification using YUI Compressor.

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/