javascript打包器与minifier
我想知道packer和minifier的区别/好处是什么，也就是说，你应该在你的web应用中部署打包版还是缩小版 示例代码：javascript打包器与minifier,javascript,minify,Javascript,Minify,我想知道packer和minifier的区别/好处是什么，也就是说，你应该在你的web应用中部署打包版还是缩小版 示例代码： var layout = { NAVVISIBLE : 1, Init : function() { this.Resize(); }, Dimensions : function() { var d = document, s = self, w, h; if (s.
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,{}))
压缩更小，但速度较慢 甚至更难调试 大多数著名的框架和插件都只是小型化的 请看一下google minifier：
他们提供了一个firebug插件，用于调试缩小的代码。根据压缩的代码，压缩的解决方案可能会导致脚本错误，而缩小的代码可以工作
因此，在打包代码后，请使用不同的浏览器进行测试。如果它不再工作，请尝试缩小版本，该版本应始终有效。两者都旨在降低JavaScript的大小，以便在客户端浏览器上快速下载
Minifier只删除不必要的内容，如空格字符和尽可能将变量重命名为较小的名称。但打包器更进一步，尽其所能最小化JavaScript的大小。例如，它将源代码转换为Base62，同时保留其映射以供客户机评估。打包器或者只是重命名变量和参数，它实际上使用Base62映射源代码，然后必须通过eval（）在客户端重新构建源代码才能使用 回避eval（）在这里是一个不好的问题，当您开始打包更大的JS库（如jQuery）时，这也会在页面加载过程中给客户端带来大量开销。这就是为什么建议只在生产JS上执行minify，因为如果您有足够的代码需要打包或缩小，那么您就有足够的代码来执行eval（）页面加载期间阻塞客户端 对于一个好的缩略器，我希望使用Google的闭包编译器 我建议使用SIMPLE_OPTIMIZATIONS模式，因为它可以清除空格/注释和munges（reduces）变量。它还可以进行一些简单的代码更改，基本上相当于代码清理和微优化。您可以在Closure Compiler应用程序入门中看到更多关于这方面的信息 或者查看打包的自述文件 YUI压缩器是另一种选择（来自Yahoo），但它没有像CC那样减少文件大小。
还有一个来自微软的工具，这个名字我一时想不起来，但它显然能给CC带来类似的结果。根据您的环境，这个工具可能更好，也可能更差。我只是顺便读了一下，所以需要进一步调查。一个“打包器”和一个“迷你器”是一样的。称自己为“打包器”的最常见工具是，它提供了base62编码选项（默认情况下关闭）。base62编码可能是个坏主意：。如果您的服务器在将文件发送到浏览器之前对其进行压缩（通常情况下是这样）那么packer就不是一个好办法。我已经测试了很多文件，尽管packer制作的文件比minification小，但它制作的压缩文件更大。虽然我不是专家，但我认为原因很简单 压缩的一个重要部分是找到重复的字符序列，并用一个较短的占位符替换它们，以便稍后解包。这与packer所做的相同，只是zip算法效率更高。因此，当你打包一个文件时，你是在某种程度上预压缩它，但使用的算法效率低于实际的zip文件。这减少了zip算法的工作量，从而降低了压缩效率
因此，如果你正在压缩文件，那么packer实际上会产生更大的下载量。再加上上述答案中提到的packer的其他缺点，使用packer也没有什么好的理由。别忘了……有很多JS库使用它进行压缩，而不是缩小或打包（jQuery使用它！）.minifier通常也会重命名变量。同意。许多minifier也提供了此选项。打包器与minifier不同。打包器要求客户端在javascript可用之前
eval