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,{}))

Don't forget [Google Closure Compiler](http://code.google.com/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 01 '10 at 14:53

jantimon · Accepted Answer · 2010-07-01T14:52:08.863

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.

edited Jul 01 '10 at 14:52

answered Jul 01 '10 at 14:46

jantimon

36,840
23
122
185

1

[Google Closure Compiler](http://closure-compiler.appspot.com/home) often produces larger files than [Microsoft Ajax Minifier](http://sundgaard.dk/javascript-minify.aspx) 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 '14 at 04: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 '16 at 08:25

score 18 · Answer 2 · answered Jul 01 '10 at 17:08

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.

score 4 · Answer 3 · answered Jul 10 '14 at 15:05

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.

IsmailS · Answer 4 · 2014-12-17T06:15:03.557

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.

edited Dec 17 '14 at 06:15

answered Jul 01 '10 at 14:53

IsmailS

10,797
21
82
134

2

Minifiers typically rename variables as well. – mhenry1384 Feb 29 '12 at 17:10
Agreed. Many minifier provides option for that also. – IsmailS Mar 01 '12 at 05:45

score 1 · Answer 5 · answered Jul 01 '10 at 14:50

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.

answered Jul 01 '10 at 14:50

JochenJung

7,183
12
64
113

score 0 · Answer 6 · edited May 23 '17 at 11:45

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.

edited May 23 '17 at 11:45

Community

1
1

answered Feb 29 '12 at 17:29

mhenry1384

7,538
5
55
74

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. – Jake Wilson Mar 23 '13 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 '13 at 15:40

javascript packer versus minifier

6 Answers6

Linked