javascript打包器与微型打包器

Question

我想知道包装器和微型器的区别/好处是什么，也就是说，你应该在你的web应用程序中部署一个打包的或精简的版本吗？

示例代码：

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;
    }
};

缩小：

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;}};

已打包：

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较小，但速度较慢。

而且更难调试。

大多数广为人知的框架和插件都被简化了。

看看谷歌的迷你工具：http://code.google.com/intl/en-EN/closure/compiler/，他们提供了一个firebug插件来调试精简的代码。

Answer 2

Packer做的不仅仅是重命名变量和参数，它实际上使用Base62映射源代码，然后必须在客户端通过eval()重新构建源代码才能使用。

回避eval()在这里是一个糟糕的问题，当你开始打包更大的JS库时，这也会在页面加载过程中给客户端带来大量的开销，比如jQuery。这就是为什么只在你的产品JS上执行minify的原因，因为如果你有足够的代码需要打包或minify，你就有足够的代码让eval()在页面加载期间阻塞客户端。

对于一个好的小工具，我会考虑使用谷歌的闭包编译器http://code.google.com/closure/compiler/

我推荐使用SIMPLE_OPTIMIZATIONS模式，因为它清除了空格/注释和参数(缩减)变量。它还做了一些简单的代码更改，基本上相当于代码清理和微优化。您可以在Closure Compiler应用程序入门或签出打包的自述文件上看到更多关于这方面的信息。

YUI Compressor是另一种选择(来自Yahoo)，但它不会像CC那样减少文件大小。还有一个来自微软的工具，这个名字我现在想不起来了，但它显然提供了与CC相似的结果。这可能是更好的选择，也可能是更坏的选择，这取决于您的环境。我只是顺便读了一下，所以还需要进一步的调查。

Answer 3

两者都旨在降低JavaScript的大小，以便能够在客户端浏览器上快速下载。

Minifier只删除不必要的东西，如空白字符和尽可能将变量重命名为较小的名称。但打包程序更进一步，尽其所能最小化JavaScript的大小。例如，它将源代码转换为Base62，同时保留其映射以供客户端评估。