javascript packer versus minifier

Question

I was wondering what the differences/benefits of the packer vs the minifier were, i.e. Should you deploy a packed or minified version in your web app?

Example code:

var layout = {      NAVVISIBLE : 1,      Init : function()      {         this.Resize();     },      Dimensions : function()     {         var d = document, s = self, w, h;         if (s.innerHeight)          { w = s.innerWidth; h = s.innerHeight; }         else if (d.documentElement && d.documentElement.clientHeight)          { w = d.documentElement.clientWidth; h = d.documentElement.clientHeight; }         else if (d.body)          { w = d.body.clientWidth; h = d.body.clientHeight; }         return new Array(parseInt(w), parseInt(h));     },      Resize : function()     {         var dim = this.Dimensions();         try          {             $('tbl_container').width    = px(dim[0] - 25);             $('row_container').height   = px(dim[1] - 100);             $('dat_container').width    = px(dim[0] - (this.NAVVISIBLE ? 275 : 25));             $('dat_container').height   = px(dim[1] - 100);         }          catch(e) {}     },      GoSideways : function()     {         var nc = $('nav_container');         var dc = $('dat_container');         nc.style.display = this.NAVVISIBLE  ? 'none' : '';         dc.width = px(parseInt(dc.width) + (this.NAVVISIBLE ? 250 : -250));         this.NAVVISIBLE ^= 1;     },      FrameLoad : function(url)     {         if (url)              content_frame.document.location = url;     } }; 

minified:

var layout={NAVVISIBLE:1,Init:function() {this.Resize();},Dimensions:function() {var d=document,s=self,w,h;if(s.innerHeight) {w=s.innerWidth;h=s.innerHeight;} else if(d.documentElement&&d.documentElement.clientHeight) {w=d.documentElement.clientWidth;h=d.documentElement.clientHeight;} else if(d.body) {w=d.body.clientWidth;h=d.body.clientHeight;} return new Array(parseInt(w),parseInt(h));},Resize:function() {var dim=this.Dimensions();try {$('tbl_container').width=px(dim[0]-25);$('row_container').height=px(dim[1]-100);$('dat_container').width=px(dim[0]-(this.NAVVISIBLE?275:25));$('dat_container').height=px(dim[1]-100);} catch(e){}},GoSideways:function() {var nc=$('nav_container');var dc=$('dat_container');nc.style.display=this.NAVVISIBLE?'none':'';dc.width=px(parseInt(dc.width)+(this.NAVVISIBLE?250:-250));this.NAVVISIBLE^=1;},FrameLoad:function(url) {if(url) content_frame.document.location=url;}}; 

packed:

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('5 B={3:1,C:6(){2.n()},v:6(){5 d=k,s=y,w,h;9(s.u){w=s.A;h=s.u}r 9(d.a&&d.a.c){w=d.a.p;h=d.a.c}r 9(d.b){w=d.b.p;h=d.b.c}D z x(g(w),g(h))},n:6(){5 7=2.v();F{$(\'N\').8=4(7[0]-o);$(\'P\').m=4(7[1]-l);$(\'i\').8=4(7[0]-(2.3?E:o));$(\'i\').m=4(7[1]-l)}L(e){}},H:6(){5 t=$(\'I\');5 j=$(\'i\');t.J.G=2.3?\'Q\':\'\';j.8=4(g(j.8)+(2.3?q:-q));2.3^=1},M:6(f){9(f)O.k.K=f}};',53,53,'||this|NAVVISIBLE|px|var|function|dim|width|if|documentElement|body|clientHeight|||url|parseInt||dat_container|dc|document|100|height|Resize|25|clientWidth|250|else||nc|innerHeight|Dimensions||Array|self|new|innerWidth|layout|Init|return|275|try|display|GoSideways|nav_container|style|location|catch|FrameLoad|tbl_container|content_frame|row_container|none'.split('|'),0,{})) 

Answer 1

Packed is smaller but is slower.

And even harder to debug.

Most of the well known frameworks and plugins are only minified.

Take a look at the google minifier: http://code.google.com/intl/en-EN/closure/compiler/ They offer a firebug plugin for debugging minified code.