Extreme JavaScript Compression with
          YUI Compressor
               Nicholas C. Zakas
     Principal Front End Eng...
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 Solution: Gzip



                   Internet




    Server
Wire Weight Solution: Gzip



Internet




                  Browser
Browser Weight
Browser Weight Solution: Minification
 •   Remove comments
 •   Remove extra white space
 •   Identifier replacement
 •   ...
Minification Tools
• ECMAScript Cruncher (ESC)
  – http://www.saltstorm.net/depo/esc/
• JSMin
  – http://www.crockford.com...
YUI Compressor




http://developer.yahoo.com/yui/compressor/
About YUI Compressor
•   Remove comments
•   Remove extra white space
•   Identifier replacement
•   Micro-optimizations
•...
Mozilla Rhino




• Open source JavaScript interpreter
• Written in Java
• Based on Firefox's interpreter

         http:/...
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
  – und...
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 = 18...
jQuery
•   96 repeated strings = 1742 bytes
•   107 true/false = 478 bytes
•   46 null = 184 bytes
•   Total primitives = ...
jQuery
Primitive Variables
What Can't Be Replaced
• Primitive values
   – strings, booleans, numbers, null, and undefined
• Global variables
   – win...
Global Variables
• Most bytes:
  – document
  – window
• Approach: Any global variable used two or more
  times should be ...
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 ...
jQuery
•   24 document = 192 bytes
•   27 window = 162 bytes
•   Total globals = 354 bytes
•   Potential Savings > 300 byt...
What Can't Be Replaced
• Primitive values
   – strings, booleans, numbers, null, and undefined
• Global variables
   – win...
Property Names
• Next to repeated strings, biggest source of extra
  bytes
• Anything to the right of a dot cannot be repl...
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
   – win...
Keywords
• Most commonly overused:
  – var
  – return
• Approach: Try to have only one var statement
  and one return per ...
Keywords




           291 b



           144 b
Keywords




           308 b



           127 b
The Results
Before:



                                              172 b
After:



                                     ...
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 ...
Living with eval()
Preventing Identifier Replacement
• Use of eval() function
  – Solution #1: Don't use
  – Solution #2: Create a global fun...
“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 fun...
Preventing Identifier Replacement
• Use of eval() function
  – Solution #1: Don't use
  – Solution #2: Create a global fun...
Jscript Conditional Comments
Preventing Identifier Replacement
• Use of eval() function
  – Solution #1: Don't use
  – Solution #2: Create a global fun...
The Compressor Helps You
Verbose Mode
• Use -v switch to enable
• Reports issues with code related to minification:
   –   Undeclared variables
   ...
Verbose Mode
Summary
For Optimal File Size
• Use local variables to store:
   – Repeated primitive values
   – Global variables
   – Object pro...
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/
...
Upcoming SlideShare
Loading in...5
×

Extreme JavaScript Compression With YUI Compressor

32,869
-1

Published on

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

Published in: Business, Technology
6 Comments
64 Likes
Statistics
Notes
No Downloads
Views
Total Views
32,869
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
394
Comments
6
Likes
64
Embeds 0
No embeds

No notes for slide

Extreme JavaScript Compression With 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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×