javascript 加壳器与压缩器

Question

我想知道加壳器与压缩器的区别/优点是什么，即您应该在网络应用程序中部署压缩版本还是压缩版本？

示例代码：

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

打包较小但速度较慢。

而且更难调试。

大多数众所周知的框架和插件都只是缩小了。

看一下 google minifier：http://code.google.com/ intl/en-EN/closure/compiler/
他们提供了一个 firebug 插件来调试缩小的代码。

Answer 2

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

侧步 eval() 在这里是一个邪恶的问题，当您开始打包更大的 JS 库（如 jQuery）时，这也会在页面加载期间在客户端上产生大量开销。这就是为什么建议只在生产 JS 上进行 minify，因为如果您有足够的代码需要进行打包或 minify，那么您就有足够的代码使 eval() 在页面加载期间阻塞客户端。

对于一个好的缩小器，我会考虑使用 Google 的 Closure 编译器
http://code.google.com/closure/compiler/

我使用的是 SIMPLE_OPTIMIZATIONS 模式推荐使用，因为它可以清除空格/注释和 munges（减少）变量。它还进行了一些简单的代码更改，基本上相当于代码清理和微观优化。您可以在闭包编译器应用程序入门中查看更多相关信息
或查看打包的自述文件。

YUI Compressor 是另一个选项（来自 Yahoo），但它不像 CC 那样减少文件大小。
还有一个来自 Microsoft 的工具，我暂时忘记了它的名字，但显然它提供了与 CC 类似的结果。这可能是更好或更差的选择，具体取决于您的环境。我只是顺便读到了这件事，因此需要进一步调查。

Answer 3

如果您的服务器在将文件发送到浏览器之前对其进行 gzip 压缩（这种情况很常见），那么加壳器就不是正确的选择。我已经测试了许多文件，尽管打包程序生成的文件比缩小的文件更小，但它生成的压缩文件更大。虽然我不是专家，但我认为原因相当简单。

压缩的一个重要部分是找到重复的字符序列并用较短的占位符替换它们以便稍后解压缩。这与加壳器所做的事情相同，只是 zip 算法效率更高。因此，当您打包文件时，您会以某种方式对其进行预压缩，但使用的算法效率低于实际的 zip 文件。这使得 zip 算法要做的工作减少，随之而来的是压缩效率的降低。

因此，如果您压缩文件，那么加壳器实际上会产生更大的下载。再加上上面答案中提到的加壳器的额外缺点，实际上没有充分的理由使用加壳器。

Answer 4

两者的目标都是降低 JavaScript 的大小，以便在客户端浏览器上实现快速下载。

缩小器仅删除不必要的内容，例如空白字符，并尽可能将变量重命名为较小的名称。但 Packer 更进一步，尽其所能来最小化 JavaScript 的大小。例如，它将源代码转换为 Base62，同时保留其映射以供客户端评估。

Answer 5

根据打包的代码，打包的解决方案可能会导致脚本错误，而缩小的解决方案可以工作。

因此，在打包代码后，使用不同的浏览器进行测试。如果它不再起作用，请尝试缩小版本，它总是应该起作用。

Answer 6

“加壳器”与“压缩器”相同。最常见的自称“打包器”的工具是 http://dean.edwards.name/packer/< /a> 提供了 Base62 编码选项（默认关闭）。 Base62 编码可能不是一个好主意：https://stackoverflow.com/a/1351624/24267。