Tại sao gói MVC4 và giảm thiểu làm cho tệp của tôi lớn hơn?

Question

Tôi đang triển khai hỗ trợ gói và rút gọn trong MVC4 và có vẻ như nó đang làm cho tệp javascript của tôi lớn hơn nếu chúng không được đóng gói/rút gọn. Tôi đang sử dụng bản dựng mới nhất có sẵn trong nuget (tùy chọn trước khi phát hành). Tôi có gói sau được thiết lập trong lớp RegisterBundles của tôi.

bundles.Add(new ScriptBundle("~/bundles/baseJS").Include(
        "~/Scripts/jquery-1.7.1.js", 
        "~/Scripts/jquery.cookie.js", 
        "~/Scripts/jquery-ui-1.8.11.js", 
        "~/Scripts/bootstrap.js", 
        "~/Scripts/jquery.pjax.js", 
        "~/Scripts/kendo/2012.1.515/js/kendo.all.min.js", 
        "~/Scripts/jquery.jstree.js", 
        "~/Scripts/jquery.unobtrusive-ajax.js", 
        "~/Scripts/jquery.validate.js", 
        "~/Scripts/jquery.validate.unobtrusive.js", 
        "~/RIS.Scripts/PostJson.js")); 

Và tôi tải nó vào _Layout.cshtml tôi sử dụng

@Scripts.Render("~/bundles/baseJS") 

Khi tôi thêm lên các byte nhận được trong Fiddler cho các kịch bản trong chế độ gỡ lỗi tôi nhận được sau

Name      Size(bytes) 
jquery      98013 
jquery cookie    1455 
jquery ui     124704 
bootstrap     52378 
pjax      8138 
kendo.all     219751 
jstree      55045 
unobtrusive-ajax   2492 
validate     13323 
validate-unobtrusive  5138 
postjson     634 

Total      581071 

Và khi tôi chạy nó trên máy chủ sản xuất của tôi, tôi nhận được sau đây từ fiddler cho toàn bộ gói js.

Bytes Received: 999,396  

Điều gì đang xảy ra ở đây? Hầu hết các tập tin được rút gọn ở một mức độ nào đó, nhưng nó không gần như gấp đôi kích thước của tải trọng của tôi.

Chi tiết bổ sung- Khi tôi tải xuống tệp js khỏi hộp dev địa phương của mình Khi tôi nhìn vào tab mạng công cụ dành cho nhà phát triển của Chrome, máy chủ cục bộ tải xuống 379kb, nhưng giá trị 'Trình phân tích cú pháp' là 975kb. Giá trị phân tích cú pháp này là gì. Nó có thể được rằng có một số thiết lập nén IIS không được thiết lập trong máy chủ của tôi nhưng là trên máy chủ IIS địa phương của tôi? Sự khác biệt duy nhất tôi lưu ý là một thực tế là IIS Express tôi đang chạy trên máy dev của tôi là 8.0, nơi máy chủ là IIS 7.5.

Answer 1

Nhiều khả năng những gì bạn đang nhìn thấy đây là một số trong những debug/release 'ma thuật' mà xuất phát từ FileExtensionReplacementList.

Hãy lấy jQuery làm ví dụ. Thông thường trong thư mục tập lệnh của bạn, bạn sẽ thấy hai bản sao của mỗi tệp, tức là jquery-1.6.2.js và jquery-1.6.2.min.js.

Bằng cách tối ưu hóa mặc định sẽ sử dụng phiên bản min.js khi debug=false và sử dụng thông thường jquery-1.6.2.js khi debug=true, vì thường làm cho việc gỡ lỗi dễ dàng hơn (không bó và không rút gọn gói).

Lựa chọn tệp 'ma thuật' này được kiểm soát thông qua FileExtensionReplacementList trên BundleCollection.

Trong phiên bản tiếp theo (RTM), sẽ có granularity hơn một chút trong danh sách này, như thường các nhà phát triển sẽ muốn nhắm mục tiêu khi chúng được nên được sử dụng, ví dụ:

list.Add("min", OptimizationMode.WhenEnabled); 
list.Add("debug", OptimizationMode.WhenDisabled); 

Answer 2

Bạn có tùy chọn đóng gói hoạt động, nhưng việc rút gọn được thực hiện bởi cài đặt BundleTable.EnableOptimizations = true và một số tùy chọn "chuyển đổi" mà bạn chưa tham gia. Xem CssMinify và JsMinify.

cái gì đó dọc theo dòng:

 var b1 =new ScriptBundle("~/bundles/jquery").Include(
       "~/Scripts/jquery-1.*"); 

     b1.Transforms.Add(new JsMinify()); 

     bundles.Add(b1); 

- và -

BundleTable.EnableOptimizations = true;