Introduction to both the engines :
Very stupid thing to say that yui was developed by yahoo where google closure is google product. sigh....
Well yahoo guys claims that yui has a high compression ratio but while trying it out i didn’t found it much. where google did an awesome job here and gave me a full control for the kind of compression requires. Like if i don’t want any AI which optimize my code and just remove the white spaces and logs or comments i just use WHITESPACE_ONLY option and easily do the job. Where yui compression doesn’t have that option to have a control on compression type. But one thing that profitable in case of yui is if you are trying to compress the code on the fly and just get it downloaded on the browser then it way faster then google closure.
What I did :
For YUI compression I used yuicompressor-2.4.7
- Git checkout to https://github.com/yui/yuicompressor.git
- install java on your machine
- $java -jar e:\yuicompressor-2.4.7pre.jar path/to/file -o path/to/output-file --type js
- #Done
The code snippet used for the test:
function myObject() {
this.property1 = "value1";
this.property2 = "value2";
var newValue = this.property1;
this.performMethod = function() {
myMethodValue = newValue;
return myMethodValue;
};
}
var myObjectInstance = new myObject();
alert(myObjectInstance.performMethod());
After compression output :
function myObject(){this.property1="value1";this.property2="value2";var a=this.property1;this.performMethod=function(){myMethodValue=a;return myMethodValue}}var myObjectInstance=new myObject();alert(myObjectInstance.performMethod());
Observation :
Well here yiu din’t done any major things except removing the whitepaces and \n’s. The var declaration can be minimized if you put up a little bit of your brain and also the object creation can be minimized here. Also changing the name of variables and a cmpression that give them alternate smaller names can reduce the code size by almost 20 to 30 %.
Here comes Google Closure :
Google gives you three levels of compression :
- Whitespace only
- Simple(quite similar to yui compression)
- Advanced
What I did :
- Setup curl
- Make a call to http://closure-compiler.appspot.com/compile
yourfile=example.js
outfile=example.min.js
curl -s \
-d \ compilation_level=[SIMPLE_OPTIMIZATIONS|WHITESPACE_ONLY|ADVANCED_OPTIMIZATIONS] \
-d output_format=text \
-d output_info=compiled_code \
--data-urlencode "js_code@${yourfile}" \
http://closure-compiler.appspot.com/compile \
> $outfile
After compression output :
In case of ADVANCE_OPTIMIZATION you got the out put like :
alert((new function(){this.b="value1";this.c="value2";var a=this.b;this.a=function(){return myMethodValue=a}}).a());
Observation :
A code of 270 bytes aprox was reduced to 116 bytes after the advance compression of google closure. Apart from this the variable declaration and namings are changed for the code size reduction significantly. here the factory methods are being used which is a nice way of writing the object oriented code instead of plain structural code. Observe that instead of creating an object for the function the declaration time here Google closure instantiated it, and the sub-method has been called just next to the object declaration.
The inbuilt intelligence of the google closure sensed the end point which is an alert function and the parameter was an instance of an object and its method which returns a value. So the sexiest part of it to declare the entire method as an argument, and the method has been called adjacent to it which reduced the overhead of naming the function and the gecko or webrick needs to memorize the function, where its just declaring the anonymous function.
Apart from the AI part of it, you might say what if we need to use that same function anywhere else in the code. Answer is google closure senses the function if being used only once, so it tries to make it in-line, else it just try to minimize the code and keep the name of function consistent so that can be used letter in the code. So in this case a definite win by closure.
Now the problem part is doing the aggressive compression is sometimes harmful, in case of debugging in production environment. Definitely google closure done a lot of things to optimize your code but at the end of the day you need a little extra efforts to understand the flow of your own code, as the change in to the prototypes and declaration part. I didn’t found any of the glitches (thanks to google) in case of type definition or argument part of a method. People can argue about the type checking and what if the arguments get messed up by the AI part of google closure. Google has a solution for that. Check http://code.google.com/closure/compiler/docs/js-for-compiler.html We know that js doesn’t have type declaration, so JSDoc Tags helps to define the type of declaration and it helps closure compiler for better understanding and generating the warnings accordingly. So if you have something in your code like
/** @const */ var a = 10;
// some more code
// other declarations and functions
a = 15;
JSC_CONSTANT_REASSIGNED_VALUE_ERROR: constant a assigned a value more than once at line 6 character 2
That helps you a lot to maintain the integrity and avoid code blots. What on earth can be better then something which helps you to write optimized and efficient code.
Still in case of compilation profiling of compile time of YUI compressor and Google closure, YUI is on the man-on-top. So if you are planning to integrate the compression in to your deployment strategy like while deploying making a URLfetch and getting the compiled compressed code, then deploy it on staging or production, will take a little longer in case of google closure, where YUI will be a faster solution. Second if you can compromise with the deployment time then using the advance optimization of google closure is always the better solution.
Posts
