Your SlideShare is downloading. ×
0
Google Closure Compiler
          vs.
   YUI Compressor

    lifesinger@gmail.com
          2009-11-09
Who’s this guy?


      http://lifesinger.org/
Players

• GC = Google Closure Compiler




  http://code.google.com/p/closure-compiler/
Players

• YC = YUI Compressor




   http://yuilibrary.com/downloads/#yuicompressor
Optimization Levels


① Whitespace Level
② Simple Optimizations
③ Advanced Optimizations
Whitespace
Whitespace Level
• Remove comments
• Remove extra white space
• Remove unneccessary semicolon




                        ...
Simple Optimizations
Simple Optimizations
•   var varName = “”        var a = “”
•   object[“property”]      object.property
•   {“key” : “va...
Simple Optimizations
•   a = new Object            a = {}
•   a = new Array             a = []
•   if(a) b()            ...
Simple Optimizations
• Simple dead code removal




                              GC
                              YC
Advanced Optimizations
Advanced Optimizations
• Dead code removal & Function inlining




                                    GC
                ...
Advanced Optimizations
• Aggressive renaming




                         GC
                              unsafe
Advanced Optimizations
• More amazing but unsafe advanced
  optimizations:
http://code.google.com/closure/compiler/docs
  ...
Whitespace Level   Simple Level   Advanced Level


GC


YC
                           Basic
Helping Compressors
Helping Compressors
① Use local variables to store:
  1. Repeated primitive values
  2. Global variables
  3. Object prope...
Helping Compressors
② Try to have only one var statement:




             Good practice for YC.
            Unneccessary ...
Hurting Compressors
Hurting Compressors
① eval() is Evil.


                    GC

                    YC
Hurting Compressors
② with statement considered harmful.


                    GC


                  YC
Hurting Compressors
③ Jscript conditional comments
Hurting Compressors
 Solutions:
   - Solution #1: Don’t use
   - Solution #2: See Solution #1
Sugar
Comments
• Preserve some comments:




                            YC
Annotation Check



http://code.google.com/closure/compiler/docs/js-for-compiler.html



                                 ...
File Combination

java -jar compiler.jar
          --js=in1.js --js=in2.js ...
          --js_output_file=out.js




     ...
native2ascii
• GC works well for utf-8 encoding files.
• YC doesn’t have this feature.
native2ascii
YC + native2ascii command script:
native2ascii
GC script for GB18030 encoding files:




Suggest GC to support:   --charset GB18030
CSS Compression
• YC is good!
• GC comes on!!!
Compression Rates
Summary
• YC is more reliable.

• GC is amazing, and almost safe at simple
  optimization level.

• GC is promising, but u...
References
• http://www.slideshare.net/nzakas/extreme-
  javascript-compression-with-yui-
  compressor
• http://stackoverf...
Thanks!
Closure Compiler vs YUICompressor
Closure Compiler vs YUICompressor
Upcoming SlideShare
Loading in...5
×

Closure Compiler vs YUICompressor

47,425

Published on

Published in: Technology, News & Politics
10 Comments
54 Likes
Statistics
Notes
No Downloads
Views
Total Views
47,425
On Slideshare
0
From Embeds
0
Number of Embeds
27
Actions
Shares
0
Downloads
320
Comments
10
Likes
54
Embeds 0
No embeds

No notes for slide

Transcript of "Closure Compiler vs YUICompressor"

  1. 1. Google Closure Compiler vs. YUI Compressor lifesinger@gmail.com 2009-11-09
  2. 2. Who’s this guy? http://lifesinger.org/
  3. 3. Players • GC = Google Closure Compiler http://code.google.com/p/closure-compiler/
  4. 4. Players • YC = YUI Compressor http://yuilibrary.com/downloads/#yuicompressor
  5. 5. Optimization Levels ① Whitespace Level ② Simple Optimizations ③ Advanced Optimizations
  6. 6. Whitespace
  7. 7. Whitespace Level • Remove comments • Remove extra white space • Remove unneccessary semicolon GC YC
  8. 8. Simple Optimizations
  9. 9. Simple Optimizations • var varName = “”  var a = “” • object[“property”]  object.property • {“key” : “val”}  {key : “val”} • „xi‟an‟  “xi‟an” • “I am ” + “hot”  “I am hot” GC YC
  10. 10. Simple Optimizations • a = new Object  a = {} • a = new Array  a = [] • if(a) b()  a && b() • if(a) b(); else c()  a ? b() : c() • if(1) b(); else c()  b() • return 2 * 3;  return 6; • return undefined;  return; • var f = function(){}  function f(){} • var a; var b;  var a, b; • … GC YC
  11. 11. Simple Optimizations • Simple dead code removal GC YC
  12. 12. Advanced Optimizations
  13. 13. Advanced Optimizations • Dead code removal & Function inlining GC YC
  14. 14. Advanced Optimizations • Aggressive renaming GC unsafe
  15. 15. Advanced Optimizations • More amazing but unsafe advanced optimizations: http://code.google.com/closure/compiler/docs /api-tutorial3.html#better
  16. 16. Whitespace Level Simple Level Advanced Level GC YC Basic
  17. 17. Helping Compressors
  18. 18. Helping Compressors ① Use local variables to store: 1. Repeated primitive values 2. Global variables 3. Object properties Good practices for YC and GC both.
  19. 19. Helping Compressors ② Try to have only one var statement: Good practice for YC. Unneccessary for GC.
  20. 20. Hurting Compressors
  21. 21. Hurting Compressors ① eval() is Evil. GC YC
  22. 22. Hurting Compressors ② with statement considered harmful. GC YC
  23. 23. Hurting Compressors ③ Jscript conditional comments
  24. 24. Hurting Compressors  Solutions: - Solution #1: Don’t use - Solution #2: See Solution #1
  25. 25. Sugar
  26. 26. Comments • Preserve some comments: YC
  27. 27. Annotation Check http://code.google.com/closure/compiler/docs/js-for-compiler.html GC
  28. 28. File Combination java -jar compiler.jar --js=in1.js --js=in2.js ... --js_output_file=out.js GC
  29. 29. native2ascii • GC works well for utf-8 encoding files. • YC doesn’t have this feature.
  30. 30. native2ascii YC + native2ascii command script:
  31. 31. native2ascii GC script for GB18030 encoding files: Suggest GC to support: --charset GB18030
  32. 32. CSS Compression • YC is good! • GC comes on!!!
  33. 33. Compression Rates
  34. 34. Summary • YC is more reliable. • GC is amazing, and almost safe at simple optimization level. • GC is promising, but unsafe at advanced optimization level.
  35. 35. References • http://www.slideshare.net/nzakas/extreme- javascript-compression-with-yui- compressor • http://stackoverflow.com/questions/168642 8/should-i-use-the-yui-compressor-or-the- new-google-closure-compiler-to-compress- my • http://news.ycombinator.com/item?id=924 426
  36. 36. Thanks!
  1. A particular slide catching your eye?

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

×