Thursday 23 June 2011

JS Compression

Have you ever opened the jquery.js.Do you think its readable or a human coded file.Its absoluetly no. why the heck it is like that?


If you dont agree see the below line of code and try understanding it.


(function(a,b){function cg(a){return d.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cd(a){if(!bZ[a]){var b=d("<"+a+">").appendTo("body")

 This loss of readability is to decrease the byte foot print and anyways readability is not a matter to be considered in the prod environment. 

Sample Hand written JS Code  :
function submitForm(){
 var myOBJ=document.getElementById("dummy");
 var value=myOBJ.value();
 alert(value);
 document.getElementsByName("MFW_LOGIN_FORM")[0].submit();
}


 Minified Code:

 function submitForm(){
var a=document.getElementById("dummy"),b=a.value();alert(b),document.getElementsByName("MFW_LOGIN_FORM")[0].submit()}  

 Ugly version:

        Old version:  174 bytes
        New version: 139 bytes
        Saved: 35 (result is 79.8% of original)  

There are lot of tools available for this JS compression and for instance I'm using UglifyJS... Hope this will be useful when you have lot of js... ;-) cheers !!! 


No comments:

Post a Comment