javascript packer與minifier

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模式是我建議使用的，因為它清除空格/注釋和munges（減少）變量。 它還做了一些簡單的代碼更改，基本上相當於代碼清理和微優化。 您可以在Closure Compiler應用程序入門中查看更多相關信息，或者查看打包的README。

YUI Compressor是另一種選擇（來自雅虎）但它並沒有像CC那樣減少文件大小。 還有一個來自微軟的工具，這個名字暫時讓我感到驚訝，但這顯然給CC帶來了類似的結果。 根據您的環境，那可能是更好或更差的選擇。 我只是順便看過它，所以需要進一步調查。

Answer 3

如果您的服務器在將文件發送到瀏覽器之前gzips文件（通常是這種情況），那么打包器就不是了。 我已經測試了很多文件，即使打包器制作的文件小於縮小文件，它也會制作更大的壓縮文件。 雖然我不是專家，但我認為原因相當簡單。

壓縮的一個重要部分是找到重復的字符序列，並用較短的占位符替換它們以便稍后解壓縮。 這與打包器的功能相同，只是zip算法效率更高。 因此，當您打包文件時，您正在使用預先壓縮它的方式，但使用的算法效率低於實際的zip文件。 這使得zip算法的工作量減少，隨后拉鏈效率降低。

因此，如果您要壓縮文件，那么打包器實際上會產生更大的下載量。 除此之外，上述答案中提到的封隔器的其他缺點，並沒有充分的理由使用封隔器。

Answer 4

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

Minifier僅刪除不必要的內容，例如空格字符，並盡可能將變量重命名為較小的名稱。 但Packer更進了一步，盡其所能來減少JavaScript的大小。 例如，它將源代碼轉換為Base62，同時保留它的映射以供客戶端評估。

Answer 5

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

在打包代碼之后，請使用不同的瀏覽器進行測試。 如果它不再起作用，請嘗試縮小版本，這應該始終有效。

Answer 6

“打包器”與“縮小器”相同。 自稱為“打包器”的最常用工具是http://dean.edwards.name/packer/ ，它將選項（默認情況下關閉）提供給base62編碼。 Base62編碼可能是一個壞主意： https ：//stackoverflow.com/a/1351624/24267。