2010-07-01 128 views
15

我想知道打包工具與縮小工具的區別/好處是什麼,即您應該在您的web應用中部署打包還是縮小版本?javascript打包工具與縮小工具

實施例的代碼:

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

不要忘記[Google Closure Compiler](http://code.google.com/closure/compiler/)...有很多JS庫使用它來壓縮,而不是縮小或打包( jQuery使用它!)。 – gnarf 2010-07-01 14:53:06

回答

16

盒裝是小,但速度較慢。

甚至更​​難以調試。

大多數衆所周知的框架和插件只是縮小了。

看看谷歌minifier:http://code.google.com/intl/en-EN/closure/compiler/ 他們提供了一個調試縮小代碼的螢火蟲插件。

+1

[Google Closure Compiler](http://closure-compiler.appspot.com/home)通常會根據我自己的經驗生成比[Microsoft Ajax Minifier](http://sundgaard.dk/javascript-minify.aspx)更大的文件除非您使用ADVANCED_OPTIMIZATIONS標誌,否則這可能會破壞您的代碼,並且在生產使用中不太實際。我鼓勵人們使用上述兩種工具,並使用更小的代碼。 – 10basetom 2014-01-22 04:34:20

+0

@ 10basetom爲什麼不一起使用?先做GCC,然後做MAM。微軟的工具似乎從GCC生成的代碼中剝離了更多的字節。 – tomasz86 2016-05-29 08:25:52

1

根據打包的代碼,打包的解決方案ca會導致腳本錯誤,而縮小會起作用。

因此,在打包代碼後,用不同的瀏覽器進行測試。如果它不再工作,請嘗試使用縮小版本,該版本始終可以正常工作。

3

兩者都旨在降低JavaScript的大小,以便在客戶端瀏覽器上快速下載。

Minifier僅刪除不必要的東西,如空白字符,並儘可能將變量重命名爲較小的名稱。但是Packer更進一步,盡其所能做到儘量減少JavaScript的大小。對於例如它將源代碼轉換爲Base62,同時保留它的映射以便由客戶端進行評估。

+2

Minifiers通常也會重命名變量。 – mhenry1384 2012-02-29 17:10:09

+0

同意。許多縮小器也提供了這個選項。 – IsmailS 2012-03-01 05:45:49

14

打包器不僅僅重命名變量和參數,它實際上使用Base62映射源代碼,然後必須通過eval()在客戶端重新構建源代碼以便可用。

側步eval()是邪惡的問題,當你開始打包更大的JS庫(如jQuery)時,這也會在頁面加載過程中在客戶端上產生大量開銷。這就是爲什麼只有在生產JS時儘量縮小的原因,因爲如果你有足夠的代碼需要打包或縮小,那麼你有足夠的代碼在頁面加載期間使eval()扼殺客戶端。

對於一個好的minifier,我將會考慮使用谷歌的關閉編譯 http://code.google.com/closure/compiler/

的SIMPLE_OPTIMIZATIONS模式是什麼,我會建議使用,因爲它清除空白/意見和munges(減少)的變量。它也做了一些簡單的代碼更改,基本上相當於代碼清理和微觀優化。您可以在Closure編譯器應用入門指南或檢查打包的README中看到更多信息。

YUI壓縮器是另一種選擇(來自雅虎),但它不會像CC那樣減小文件大小。 還有一個來自微軟的工具,目前這個名字讓我想起了這個名字,但這顯然給CC帶來了類似的結果。根據您的環境,這可能是更好或更差的選項。我只是順帶閱讀,所以需要進一步調查。

0

「封隔器」與「縮小器」相同。自稱爲「打包器」的最常用的工具是http://dean.edwards.name/packer/,它給出了base62編碼的選項(默認關閉)。 Base62編碼可能是一個壞主意:https://stackoverflow.com/a/1351624/24267

+1

封隔器與縮小器不同。 Packer需要客戶端'eval'並在可用之前重建javascript。所以,儘管封隔器可能比縮小器好些,但它可能會變慢。 – 2013-03-23 17:09:45

+2

如果您在Dean Edwards「打包器」中關閉base62編碼,則不需要客戶端評估。它默認關閉。 – mhenry1384 2013-03-24 15:40:42

3

如果您的服務器在將文件發送到瀏覽器之前(這是很常見的情況),那麼打包程序是而不是要走的路。我測試了一些文件,即使打包器製作的文件小於縮小文件,它也會生成更大的壓縮文件。雖然我不是專家,但我認爲原因很簡單。

壓縮的一大部分是找到重複的字符序列,並用較短的佔位符替換它們以便稍後解壓縮。這與打包程序是一樣的,除了zip算​​法更加高效。所以,當你打包一個文件時,你會以一種壓縮方式對其進行壓縮,但使用的算法效率低於實際的壓縮文件。這使zip算法的工作量減少,壓縮效率隨之降低。

所以,如果你壓縮文件,那麼打包器實際上會產生更大的下載量。除此之外,上述答案中提到的封隔器還有其他缺點,使用封隔器確實沒有什麼好的理由。