Your SlideShare is downloading. ×
0
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

30,056

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
30,056
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
390
Comments
6
Likes
64
Embeds 0
No embeds

No notes for slide

Transcript of "Extreme JavaScript Compression With YUI Compressor"

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

×