Download - Closure Compiler vs YUICompressor
![Page 3: Closure Compiler vs YUICompressor](https://reader033.vdocuments.site/reader033/viewer/2022051818/54bd8a594a7959dd5a8b457d/html5/thumbnails/3.jpg)
Players
• GC = Google Closure Compiler
http://code.google.com/p/closure-compiler/
![Page 4: Closure Compiler vs YUICompressor](https://reader033.vdocuments.site/reader033/viewer/2022051818/54bd8a594a7959dd5a8b457d/html5/thumbnails/4.jpg)
Players
• YC = YUI Compressor
http://yuilibrary.com/downloads/#yuicompressor
![Page 5: Closure Compiler vs YUICompressor](https://reader033.vdocuments.site/reader033/viewer/2022051818/54bd8a594a7959dd5a8b457d/html5/thumbnails/5.jpg)
Optimization Levels
① Whitespace Level
② Simple Optimizations
③ Advanced Optimizations
![Page 6: Closure Compiler vs YUICompressor](https://reader033.vdocuments.site/reader033/viewer/2022051818/54bd8a594a7959dd5a8b457d/html5/thumbnails/6.jpg)
Whitespace
![Page 7: Closure Compiler vs YUICompressor](https://reader033.vdocuments.site/reader033/viewer/2022051818/54bd8a594a7959dd5a8b457d/html5/thumbnails/7.jpg)
Whitespace Level
• Remove comments
• Remove extra white space
• Remove unneccessary semicolon
GC
YC
![Page 8: Closure Compiler vs YUICompressor](https://reader033.vdocuments.site/reader033/viewer/2022051818/54bd8a594a7959dd5a8b457d/html5/thumbnails/8.jpg)
Simple Optimizations
![Page 9: Closure Compiler vs YUICompressor](https://reader033.vdocuments.site/reader033/viewer/2022051818/54bd8a594a7959dd5a8b457d/html5/thumbnails/9.jpg)
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
![Page 10: Closure Compiler vs YUICompressor](https://reader033.vdocuments.site/reader033/viewer/2022051818/54bd8a594a7959dd5a8b457d/html5/thumbnails/10.jpg)
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
![Page 11: Closure Compiler vs YUICompressor](https://reader033.vdocuments.site/reader033/viewer/2022051818/54bd8a594a7959dd5a8b457d/html5/thumbnails/11.jpg)
Simple Optimizations
• Simple dead code removal
GC
YC
![Page 12: Closure Compiler vs YUICompressor](https://reader033.vdocuments.site/reader033/viewer/2022051818/54bd8a594a7959dd5a8b457d/html5/thumbnails/12.jpg)
Advanced Optimizations
![Page 13: Closure Compiler vs YUICompressor](https://reader033.vdocuments.site/reader033/viewer/2022051818/54bd8a594a7959dd5a8b457d/html5/thumbnails/13.jpg)
Advanced Optimizations
• Dead code removal & Function inlining
GC
YC
![Page 14: Closure Compiler vs YUICompressor](https://reader033.vdocuments.site/reader033/viewer/2022051818/54bd8a594a7959dd5a8b457d/html5/thumbnails/14.jpg)
Advanced Optimizations
• Aggressive renaming
GC
unsafe
![Page 15: Closure Compiler vs YUICompressor](https://reader033.vdocuments.site/reader033/viewer/2022051818/54bd8a594a7959dd5a8b457d/html5/thumbnails/15.jpg)
Advanced Optimizations
• More amazing but unsafe advanced
optimizations:
http://code.google.com/closure/compiler/docs
/api-tutorial3.html#better
![Page 16: Closure Compiler vs YUICompressor](https://reader033.vdocuments.site/reader033/viewer/2022051818/54bd8a594a7959dd5a8b457d/html5/thumbnails/16.jpg)
Whitespace Level Simple Level Advanced Level
GC
YC
Basic
![Page 17: Closure Compiler vs YUICompressor](https://reader033.vdocuments.site/reader033/viewer/2022051818/54bd8a594a7959dd5a8b457d/html5/thumbnails/17.jpg)
Helping Compressors
![Page 18: Closure Compiler vs YUICompressor](https://reader033.vdocuments.site/reader033/viewer/2022051818/54bd8a594a7959dd5a8b457d/html5/thumbnails/18.jpg)
Helping Compressors
① Use local variables to store:
1. Repeated primitive values
2. Global variables
3. Object properties
Good practices for YC and GC both.
![Page 19: Closure Compiler vs YUICompressor](https://reader033.vdocuments.site/reader033/viewer/2022051818/54bd8a594a7959dd5a8b457d/html5/thumbnails/19.jpg)
Helping Compressors
② Try to have only one var statement:
Good practice for YC.
Unneccessary for GC.
![Page 20: Closure Compiler vs YUICompressor](https://reader033.vdocuments.site/reader033/viewer/2022051818/54bd8a594a7959dd5a8b457d/html5/thumbnails/20.jpg)
Hurting Compressors
![Page 21: Closure Compiler vs YUICompressor](https://reader033.vdocuments.site/reader033/viewer/2022051818/54bd8a594a7959dd5a8b457d/html5/thumbnails/21.jpg)
Hurting Compressors
① eval() is Evil.
GC
YC
![Page 22: Closure Compiler vs YUICompressor](https://reader033.vdocuments.site/reader033/viewer/2022051818/54bd8a594a7959dd5a8b457d/html5/thumbnails/22.jpg)
![Page 23: Closure Compiler vs YUICompressor](https://reader033.vdocuments.site/reader033/viewer/2022051818/54bd8a594a7959dd5a8b457d/html5/thumbnails/23.jpg)
Hurting Compressors
② with statement considered harmful.
GC
YC
![Page 24: Closure Compiler vs YUICompressor](https://reader033.vdocuments.site/reader033/viewer/2022051818/54bd8a594a7959dd5a8b457d/html5/thumbnails/24.jpg)
![Page 25: Closure Compiler vs YUICompressor](https://reader033.vdocuments.site/reader033/viewer/2022051818/54bd8a594a7959dd5a8b457d/html5/thumbnails/25.jpg)
Hurting Compressors
③ Jscript conditional comments
![Page 26: Closure Compiler vs YUICompressor](https://reader033.vdocuments.site/reader033/viewer/2022051818/54bd8a594a7959dd5a8b457d/html5/thumbnails/26.jpg)
Hurting Compressors
Solutions:
- Solution #1: Don’t use
- Solution #2: See Solution #1
![Page 27: Closure Compiler vs YUICompressor](https://reader033.vdocuments.site/reader033/viewer/2022051818/54bd8a594a7959dd5a8b457d/html5/thumbnails/27.jpg)
Sugar
![Page 28: Closure Compiler vs YUICompressor](https://reader033.vdocuments.site/reader033/viewer/2022051818/54bd8a594a7959dd5a8b457d/html5/thumbnails/28.jpg)
Comments
• Preserve some comments:
YC
![Page 29: Closure Compiler vs YUICompressor](https://reader033.vdocuments.site/reader033/viewer/2022051818/54bd8a594a7959dd5a8b457d/html5/thumbnails/29.jpg)
Annotation Check
GC
http://code.google.com/closure/compiler/docs/js-for-compiler.html
![Page 30: Closure Compiler vs YUICompressor](https://reader033.vdocuments.site/reader033/viewer/2022051818/54bd8a594a7959dd5a8b457d/html5/thumbnails/30.jpg)
File Combination
GC
java -jar compiler.jar
--js=in1.js --js=in2.js ...
--js_output_file=out.js
![Page 31: Closure Compiler vs YUICompressor](https://reader033.vdocuments.site/reader033/viewer/2022051818/54bd8a594a7959dd5a8b457d/html5/thumbnails/31.jpg)
native2ascii
• GC works well for utf-8 encoding files.
• YC doesn’t have this feature.
![Page 32: Closure Compiler vs YUICompressor](https://reader033.vdocuments.site/reader033/viewer/2022051818/54bd8a594a7959dd5a8b457d/html5/thumbnails/32.jpg)
native2ascii
YC + native2ascii command script:
![Page 33: Closure Compiler vs YUICompressor](https://reader033.vdocuments.site/reader033/viewer/2022051818/54bd8a594a7959dd5a8b457d/html5/thumbnails/33.jpg)
native2ascii
GC script for GB18030 encoding files:
Suggest GC to support: --charset GB18030
![Page 34: Closure Compiler vs YUICompressor](https://reader033.vdocuments.site/reader033/viewer/2022051818/54bd8a594a7959dd5a8b457d/html5/thumbnails/34.jpg)
CSS Compression
• YC is good!
• GC comes on!!!
![Page 35: Closure Compiler vs YUICompressor](https://reader033.vdocuments.site/reader033/viewer/2022051818/54bd8a594a7959dd5a8b457d/html5/thumbnails/35.jpg)
Compression Rates
![Page 36: Closure Compiler vs YUICompressor](https://reader033.vdocuments.site/reader033/viewer/2022051818/54bd8a594a7959dd5a8b457d/html5/thumbnails/36.jpg)
Summary
• YC is more reliable.
• GC is amazing, and almost safe at simple
optimization level.
• GC is promising, but unsafe at advanced
optimization level.
![Page 37: Closure Compiler vs YUICompressor](https://reader033.vdocuments.site/reader033/viewer/2022051818/54bd8a594a7959dd5a8b457d/html5/thumbnails/37.jpg)
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
![Page 38: Closure Compiler vs YUICompressor](https://reader033.vdocuments.site/reader033/viewer/2022051818/54bd8a594a7959dd5a8b457d/html5/thumbnails/38.jpg)
Thanks!