ASP.NET - MVC - Bundling

Bundling

Các kỹ thuật đóng gói và thu nhỏ đã được giới thiệu trong MVC 4 để cải thiện thời gian tải các yêu cầu. Bundling cho phép chúng ta tải một loạt các tệp tĩnh từ máy chủ vào một yêu cầu http.

Hình dưới đây minh họa các kỹ thuật bundling :

Tải tập tin script trong các yêu cầu riêng biệt

rong hình trên, trình duyệt gửi hai yêu cầu riêng biệt để tải hai tập tin JavaScript khác nhau MyJavaScriptFile-1.js và MyJavaScriptFile-2.js.

Kỹ thuật Bundling trong MVC 4 cho phép chúng tôi tải nhiều hơn một tập tin JavaScript, MyJavaScriptFile-1.js và MyJavaScriptFile-2.js trong một yêu cầu như dưới đây.

Bundling and minification

Minification (thu nhỏ)

Kỹ thuật thu nhỏ tối ưu hóa kích thước tệp script hoặc css bằng cách xóa các khoảng trắng và nhận xét không cần thiết và rút ngắn tên biến thành một ký tự.

Ví dụ, hãy xem hàm JavaScript.

Ví dụ: JavaScript

sayHello = function(name){
    //this is comment
    var msg = "Hello" + name;
    alert(msg);
}

JavaScript ở trên sẽ được tối ưu hóa và tối thiểu hóa thành đoạn script sau.

Ví dụ : Tối ưu JavaScript

sayHello=function(n){var t="Hello"+n;alert(t)}

Như bạn có thể thấy ở trên, nó đã loại bỏ khoảng trắng không cần thiết, các ghi chú và cũng rút ngắn tên biến để giảm các ký tự sẽ lần lượt giảm kích thước tệp JavaScript.

Đóng gói và giảm thiểu tác động đến việc tải trang, nó tải trang nhanh hơn bằng cách giảm thiểu kích thước của tập tin và số lượng yêu cầu.

Các kiểu đóng gói

MVC 5 có các lớp đóng gói trong namespace System.web.Optimization :

ScriptBundle: ScriptBundle chịu trách nhiệm thu nhỏ JavaScript của một hoặc nhiều tập tin script .

StyleBundle:StyleBundle chịu trách nhiệm thu nhỏ một hoặc nhiều tập tin CSS.

DynamicFolderBundle:Đại diện cho một đối tượng Bundle mà ASP.NET tạo ra từ một thư mục chứa các tập tin cùng loại.

Tất cả các lớp gói ở trên được bao gồm trong  System.Web.Optimization.Bundle và có nguồn gốc từ Bundle class.

 Những điểm cần nhớ:

  1. Bundling and Minification giảm thiểu thời gian tải tập lệnh tĩnh hoặc tập tin css sau đó giảm thiểu thời gian tải trang.
  2. Framework MVC cung cấp các lớp ScriptBundle, StyleBundle và DynamicFolderBundle.
  3. ScriptBundle thu nhỏ các tập tin JavaScript.
  4. StyleBundle thu nhỏ các tập tin CSS.