22

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,{}))
1
  • 1
    Don't forget Google Closure Compiler either... There are a lot of JS libraries using this for their compression rather than minify or pack (jQuery uses it!).
    – gnarf
    Jul 1, 2010 at 14:53

6 Answers 6

20

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.

2
  • 1
    Google Closure Compiler often produces larger files than Microsoft Ajax Minifier from my own experience unless you use the ADVANCED_OPTIMIZATIONS flag, which will likely break your code and is not very practical in production use. I encourage people to use both tools above and use whatever code is smaller.
    – thdoan
    Jan 22, 2014 at 4:34
  • @10basetom Why not use both together? Do GCC first, and then MAM. The Microsoft's tool seems to strip a few more bytes out of the code produced by GCC.
    – tomasz86
    May 29, 2016 at 8:25
18

Packer does more then just rename vars and arguments, it actually maps the source code using Base62 which then must be rebuilt on the client side via eval() in order to be usable.

Side stepping the eval() is evil issues here, this can also create a large amount of overhead on the client during page load when you start packing larger JS libraries, like jQuery. This why only doing minify on your production JS is recommend, since if you have enough code to need to do packing or minify, you have enough code to make eval() choke the client during page load.

For a good minifier, I would look to using Google's Closure Compiler http://code.google.com/closure/compiler/

The SIMPLE_OPTIMIZATIONS mode is what I would recommend using, as it cleans whitespace/comments and munges(reduces) variables. It also does some simple code changes that basically amount to code clean up and micro optimizations. You can see more about this on the Getting Started with the Closure Compiler Application or the checking out the packaged README.

YUI Compressor is another option(from Yahoo) but it doesn't reduce the file size as much as CC does. There is also a tool from Microsoft, the name escapes me at the moment but that apparently delivers similar results to CC. That one could be a better or worse option, depending on your environment. I've only read about it in passing, so further investigation would be required.

4

If your server gzips files before sending them to the browser (which is very often the case) then packer is not the way to go. I've tested a number of files, and even though packer makes smaller files than minification, it makes larger zipped files. While I'm not an expert, I think the reason is fairly straight-forward.

A big part of zipping is to find repeated character sequences and replace them with a shorter place holder to be unpacked later. This is the same thing packer does, except zip algorithms are much more efficient. So when you pack a file you are in a way pre-zipping it, but with an algorithm that is less efficient than an actual zip file. This leaves less work for the zip algorithm to do, with a subsequent decrease in zipping efficiency.

So if you are zipping the files, then packer will actually produce larger downloads. Add to this the additional downsides of packer mentioned in the above answers, and there is really no good reason to use packer.

4

Both aims at lowering the size of JavaScript to enable fast download on the client browser.

Minifier only removes unnecessary things like white space characters and renaming variable to smaller names wherever possible. But a Packer goes one step further and does whatever it can do to minimize the size of JavaScript. For e.g. it converts source code to Base62 while preserving it's mappings to be evaluated by client.

2
  • 2
    Minifiers typically rename variables as well.
    – mhenry1384
    Feb 29, 2012 at 17:10
  • Agreed. Many minifier provides option for that also.
    – IsmailS
    Mar 1, 2012 at 5:45
1

Depending on the code packed, the packed solution ca lead to script-errors, while the minified will work.

So test with different browsers, after packing your code. If it doesn't work anymore, try the minified version, which always should work.

0

A "packer" is the same as a "minifier". The most common tool that calls itself a "packer" is http://dean.edwards.name/packer/ which gives the option (turned off by default) to base62 encode. Base62 encoding is probably a bad idea: https://stackoverflow.com/a/1351624/24267.

2
  • 1
    A packer is not the same as a minifier. Packer requires the client to eval and rebuild the javascript before it is useable. So even though packer might shrink stuff better than a minifier it has the potential to be slower. Mar 23, 2013 at 17:09
  • 2
    If you have base62 encoding turned off in Dean Edwards "packer" it requires no client-side eval. It's turned off by default.
    – mhenry1384
    Mar 24, 2013 at 15:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.