2010-07-01 24 views
15

Tôi đã tự hỏi sự khác biệt/lợi ích của nhà đóng gói so với bộ khai thác là gì, tức là bạn nên triển khai phiên bản được đóng gói hoặc rút gọn trong ứng dụng web của mình?javascript packer so với minifier

Ví dụ mã:

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; 
    } 
}; 

minified:

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;}}; 

đóng gói:

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

Đừng quên [Trình biên dịch đóng cửa của Google] (http://code.google.com/closure/compiler/) ... Có rất nhiều thư viện JS sử dụng tính năng này để nén hơn là rút gọn hoặc đóng gói (jQuery sử dụng nó!). – gnarf

Trả lời

16

đóng gói nhỏ nhưng chậm hơn.

Và thậm chí khó khăn hơn để gỡ lỗi.

Hầu hết các khuôn khổ và plugin nổi tiếng chỉ được rút gọn.

Hãy xem google minifier: http://code.google.com/intl/en-EN/closure/compiler/ Chúng cung cấp plugin firebug để gỡ lỗi mã được rút gọn.

+1

[Trình biên dịch đóng cửa của Google] (http://closure-compiler.appspot.com/home) thường tạo ra các tệp lớn hơn [Microsoft Ajax Minifier] (http://sundgaard.dk/javascript-minify.aspx) từ trải nghiệm của riêng tôi trừ khi bạn sử dụng cờ ADVANCED_OPTIMIZATIONS, điều này có khả năng sẽ phá vỡ mã của bạn và không thực tế trong việc sử dụng sản xuất. Tôi khuyến khích mọi người sử dụng cả hai công cụ trên và sử dụng bất kỳ mã nào nhỏ hơn. – 10basetom

+0

@ 10basetom Tại sao không sử dụng cả hai? Thực hiện GCC trước và sau đó là MAM. Công cụ của Microsoft dường như có thêm một vài byte ngoài mã được sản xuất bởi GCC. – tomasz86

1

Tùy thuộc vào mã được đóng gói, giải pháp đóng gói ca dẫn đến lỗi tập lệnh, trong khi việc rút gọn sẽ hoạt động.

Vì vậy, hãy thử nghiệm với các trình duyệt khác nhau, sau khi đóng gói mã của bạn. Nếu nó không hoạt động nữa, hãy thử phiên bản được rút gọn, luôn luôn hoạt động.

3

Cả hai đều nhắm mục tiêu giảm kích thước của JavaScript để cho phép tải xuống nhanh trên trình duyệt của khách hàng.

Trình chỉnh sửa chỉ xóa những thứ không cần thiết như ký tự khoảng trắng và đổi tên biến thành tên nhỏ hơn bất cứ khi nào có thể. Nhưng một Packer đi xa hơn một bước và làm bất cứ điều gì nó có thể làm để giảm thiểu kích thước của JavaScript. Ví dụ: nó chuyển đổi mã nguồn thành Base62 trong khi vẫn giữ bản đồ của nó được đánh giá bởi máy khách.

+2

Minifiers thường đổi tên biến. – mhenry1384

+0

Đồng ý. Nhiều minifier cung cấp tùy chọn cho điều đó. – IsmailS

14

Trình đóng gói thực hiện nhiều hơn sau đó đổi tên mã và đối số, nó thực sự ánh xạ mã nguồn bằng Base62 mà sau đó phải được xây dựng lại trên phía máy khách thông qua eval() để có thể sử dụng được.

Bên bước eval() là vấn đề xấu ở đây, điều này cũng có thể tạo một lượng lớn phí trên máy khách khi tải trang khi bạn bắt đầu đóng gói các thư viện JS lớn hơn, như jQuery. Tại sao chỉ làm minify trên JS sản xuất của bạn là khuyến cáo, vì nếu bạn có đủ mã cần phải đóng gói hoặc rút gọn, bạn có đủ mã để làm cho eval() làm nghẽn máy khách trong khi tải trang.

Đối với một minifier tốt, tôi sẽ xem xét để sử dụng Closure Compiler http://code.google.com/closure/compiler/

của Google Chế độ SIMPLE_OPTIMIZATIONS là những gì tôi sẽ khuyên bạn sử dụng, vì nó làm sạch khoảng trắng/bình luận và munges (giảm) các biến. Nó cũng làm một số thay đổi mã đơn giản mà về cơ bản số tiền để làm sạch mã và tối ưu hóa vi mô. Bạn có thể xem thêm về điều này trên ứng dụng Bắt đầu với Trình biên dịch đóng gói hoặc kiểm tra README được đóng gói.

Máy nén YUI là một tùy chọn khác (từ Yahoo) nhưng nó không làm giảm kích thước tệp nhiều như CC. Ngoài ra còn có một công cụ từ Microsoft, tên thoát tôi vào lúc này nhưng điều đó dường như mang lại kết quả tương tự cho CC. Đó có thể là một lựa chọn tốt hơn hoặc tệ hơn, tùy thuộc vào môi trường của bạn. Tôi đã chỉ đọc về nó trong đi qua, do đó, điều tra thêm sẽ được yêu cầu.

0

Một "nhà đóng gói" giống với "thợ sửa ống nước". Công cụ phổ biến nhất tự gọi là "trình đóng gói" là http://dean.edwards.name/packer/ cho phép tùy chọn (tắt theo mặc định) thành mã hóa base62. Mã hóa Base62 có lẽ là một ý tưởng tồi: https://stackoverflow.com/a/1351624/24267.

+1

Trình đóng gói không giống như bộ khai thác. Packer yêu cầu client phải 'eval' và xây dựng lại javascript trước khi nó có thể sử dụng được. Vì vậy, ngay cả khi nhà đóng gói có thể thu nhỏ thứ tốt hơn so với bộ giảm tốc, nó có khả năng chậm hơn. –

+2

Nếu bạn đã tắt mã hóa base62 trong trình đóng gói "Dean Edwards", nó không yêu cầu eval phía máy khách. Nó được tắt theo mặc định. – mhenry1384

3

Nếu máy chủ của bạn gzips tệp trước khi gửi chúng tới trình duyệt (điều này thường xảy ra) thì nhà đóng gói là không phải là cách để đi. Tôi đã thử nghiệm một số tệp và mặc dù trình đóng gói tạo ra các tệp nhỏ hơn so với việc rút gọn, nó tạo các tệp nén lớn hơn. Trong khi tôi không phải là một chuyên gia, tôi nghĩ lý do là khá thẳng thắn.

Một phần lớn của việc nén là tìm chuỗi ký tự lặp lại và thay thế chúng bằng một trình giữ chỗ ngắn hơn để được giải nén sau. Đây là trình đóng gói tương tự, ngoại trừ các thuật toán zip hiệu quả hơn nhiều. Vì vậy, khi bạn đóng gói một tập tin bạn đang ở trong một cách trước khi nén nó, nhưng với một thuật toán đó là ít hiệu quả hơn so với một tập tin zip thực tế. Điều này làm cho công việc ít hơn cho thuật toán zip để làm, với một giảm tiếp theo trong hiệu quả nén.

Vì vậy, nếu bạn đang nén các tệp, thì trình đóng gói sẽ thực sự tạo ra các bản tải xuống lớn hơn. Thêm vào đó các nhược điểm bổ sung của người đóng gói được đề cập trong các câu trả lời ở trên, và thực sự không có lý do chính đáng để sử dụng trình đóng gói.

Các vấn đề liên quan