Gộp và rút gọn (Bundle and minify) các file tĩnh trong ASP.NET Core

Bài viết này giải thích những lợi ích của việc áp dụng bundling (gộp file) và minification (rút gọn), bao gồm cách các tính năng này có thể được sử dụng với các ứng dụng web ASP.NET Core.

Bundling và minification là gì

Bundling và minification là hai tối ưu hóa hiệu năng riêng biệt mà bạn có thể áp dụng trong một ứng dụng web. Khi dùng cùng nhau, bundling và minification cải thiện hiệu năng bằng cách giảm số lượng yêu cầu server và giảm kích thước của các file tĩnh được yêu cầu.

Bundling và minification chủ yếu cải thiện thời gian tải trang đầu tiên. Sau khi một trang web được yêu cầu, trình duyệt cache các file tĩnh (JavaScript, CSS, và hình ảnh). Vì vậy, bundling và minification không cải thiện hiệu năng khi yêu cầu cùng một trang, hoặc các trang trên cùng một site yêu cầu cùng các file. Nếu header expires không được đặt chính xác trên các file và nếu bundling và minification không được sử dụng, heuristics (phương pháp suy luận) làm mới của trình duyệt sẽ đánh dấu các file là cũ sau vài ngày. Ngoài ra, trình duyệt yêu cầu yêu cầu xác thực cho mỗi file. Trong trường hợp này, bundling và minification cung cấp cải thiện hiệu năng ngay cả sau yêu cầu trang đầu tiên.

Bundling (Gộp file)

Bundling kết hợp nhiều file thành một file duy nhất. Bundling giảm số lượng yêu cầu server cần thiết để render một web asset (tài nguyên web), chẳng hạn như một trang web. Bạn có thể tạo bất kỳ số lượng bundle riêng lẻ nào dành riêng cho CSS, JavaScript, v.v. Ít file hơn có nghĩa là ít yêu cầu HTTP hơn từ trình duyệt đến server hoặc từ dịch vụ cung cấp ứng dụng. Điều này dẫn đến cải thiện hiệu năng tải trang đầu tiên.

Minification (Rút gọn code)

Minification loại bỏ các ký tự không cần thiết khỏi code mà không thay đổi chức năng. Kết quả là giảm đáng kể kích thước của các file được yêu cầu (chẳng hạn như CSS, hình ảnh và file JavaScript). Các tác dụng phổ biến của minification bao gồm rút ngắn tên biến thành một ký tự và xóa các comment và khoảng trắng không cần thiết.

Xem xét hàm JavaScript sau:

AddAltToImg = function (imageTagAndImageID, imageContext) {
  ///<signature>
  ///<summary> Adds an alt tab to the image
  // </summary>
  //<param name="imgElement" type="String">The image selector.</param>
  //<param name="ContextForImage" type="String">The image context.</param>
  ///</signature>
  var imageElement = $(imageTagAndImageID, imageContext);
  imageElement.attr('alt', imageElement.attr('id').replace(/ID/, ''));
}

Minification rút gọn hàm thành:

AddAltToImg=function(t,a){var r=$(t,a);r.attr("alt",r.attr("id").replace(/ID/,""))};

Ngoài việc loại bỏ các comment và khoảng trắng không cần thiết, các tên tham số và biến sau đây đã được đổi tên như sau:

Tác động của bundling và minification

Bảng sau đây phác thảo sự khác biệt giữa tải file riêng lẻ và sử dụng bundling và minification cho một ứng dụng web điển hình.

Thời gian tải đã được cải thiện, nhưng ví dụ này chạy cục bộ. Lợi ích hiệu năng lớn hơn được nhận ra khi sử dụng bundling và minification với các file được truyền qua mạng.

Ứng dụng thử nghiệm được sử dụng để tạo ra các con số trong bảng trên cho thấy những cải tiến điển hình có thể không áp dụng cho một ứng dụng cụ thể. Chúng tôi khuyến nghị kiểm tra một ứng dụng để xác định xem bundling và minification có mang lại thời gian tải cải thiện hay không.

Chọn chiến lược bundling và minification

ASP.NET Core không cung cấp giải pháp bundling và minification tích hợp sẵn. Các công cụ bên thứ ba, chẳng hạn như Gulp và Webpack, cung cấp tự động hóa workflow cho bundling và minification, cũng như linting và tối ưu hóa hình ảnh. Việc bundle và minify trước khi triển khai mang lại lợi thế giảm tải server. Tuy nhiên, bundling và minification tăng độ phức tạp của build và chỉ hoạt động với các file tĩnh.

Bundling và minification dựa theo môi trường

Theo thực hành tốt nhất, các file đã được bundle và minify của ứng dụng nên được sử dụng trong môi trường production. Trong quá trình development, các file gốc giúp debug ứng dụng dễ dàng hơn.

Chỉ định các file nào cần đưa vào trong trang của bạn bằng cách sử dụng Environment Tag Helper trong các view. Environment Tag Helper chỉ render nội dung của nó khi chạy trong các môi trường cụ thể.

Tag environment sau đây render các file CSS chưa được xử lý khi chạy trong môi trường Development:

<environment include="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</environment>

Tag environment sau đây render các file CSS đã được bundle và minify khi chạy trong môi trường khác Development. Ví dụ, chạy trong Production hoặc Staging sẽ kích hoạt render các stylesheet này:

<environment exclude="Development">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>