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，因为如果你有足够的代码需要打包或缩小，你有足够的代码使eval（）在页面加载期间阻塞客户端。

对于一个好的minifier，我会寻求使用谷歌的Closure Compiler http://code.google.com/closure/compiler/

SIMPLE_OPTIMIZATIONS模式是我建议使用的模式，因为它清除空格/注释和清除（减少）变量。它还做了一些简单的代码更改，基本上相当于代码清理和微优化。您可以在Closure Compiler应用程序入门中看到更多相关信息或者检查打包的README。

YUI Compressor是另一种选择（来自雅虎）但它并没有像CC那样减少文件大小。还有一个来自微软的工具，这个名字暂时让我感到惊讶，但这显然给CC带来了类似的结果。根据您的环境，那可能是更好或更差的选择。我只是顺便看过它，所以需要进一步调查。

Answer 3

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

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

Answer 4

如果您的服务器在将文件发送到浏览器之前gzips文件（通常是这种情况），那么打包器不是的方式。我已经测试了许多文件，即使打包器制作的文件比缩小文件小，也会生成更大的压缩文件。虽然我不是专家，但我认为原因相当简单。

压缩的一个重要部分是找到重复的字符序列，并用较短的占位符替换它们以便以后解压缩。这与打包器的功能相同，只是zip算法效率更高。因此，当您打包文件时，您正在使用预先压缩它的方式，但使用的算法效率低于实际的zip文件。这样就可以减少zip算法的工作量，从而降低了压缩效率。

因此，如果您要压缩文件，那么打包器实际上会产生更大的下载量。除此之外，上述答案中提到的封隔器的其他缺点，并没有充分的理由使用封隔器。

Answer 5

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

在打包代码后，使用不同的浏览器进行测试。如果它不再起作用，请尝试缩小版本，该版本始终有效。

Answer 6

“打包器”与“缩小器”相同。自称为“打包器”的最常用工具是http://dean.edwards.name/packer/，它将选项（默认情况下关闭）提供给base62编码。 Base62编码可能是一个坏主意：https://stackoverflow.com/a/1351624/24267。

javascript packer与minifier

6 个答案: