Nén HTML trong ASP.NET MVC 5 với package RazorHtmlMinifier.Mvc5

Ngoài nén Javascript, CSS ra thì việc nén mã HTML cũng là một việc hết sức quan trọng nếu bạn muốn cải thiện tốc độ web và giảm lượng băng thông cho website của bạn.
Bài viết sau hướng dẫn bạn sử dụng package RazorHtmlMinifier.Mvc5 để giảm thiểu mã HTML. Điều đặc biệt là những thay đổi này chỉ có tác dụng khi chúng ta thực hiện biên dịch (compile) ứng dụng web chứ không làm ảnh hưởng đến hiệu năng của web trong thời gian chạy.

Bước 1: Cài đặt package RazorHtmlMinifier.Mvc5 với lệnh sau trong màn hình Console Package Install-Package RazorHtmlMinifier.Mvc5

Bước 2: Mở file Views/Web.config thay thế đoạn mã dạng giống như sau

<host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=5.2.3.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />

thành đoạn mã này

<host factoryType="RazorHtmlMinifier.Mvc5.MinifyingMvcWebRazorHostFactory, RazorHtmlMinifier.Mvc5, Version=1.3.0.0, Culture=neutral, PublicKeyToken=a517a17e203fcde4" />

Bước 3: Mở file Web.config ở thư mục gốc của project và tìm đến đoạn mã dạng giống như sau

<compilation debug="true" targetFramework="4.7.2" />

Giữ nguyên giá trị targetFramework và thay thế thành lệnh sau

<compilation debug="true" targetFramework="4.7.2">
    <buildProviders>
        <add extension=".cshtml" type="RazorHtmlMinifier.Mvc5.MinifyingRazorBuildProvider, RazorHtmlMinifier.Mvc5" />
    </buildProviders>
</compilation>

Vậy là xong. Đây là kết quả test của mình trước và sau khi nén HTML.

Trước khi nén

Sau khi nén

Mình so sánh tổng số dòng thì trước khi nén là 1747 dòng và sau khi nén thì chỉ còn 1634 dòng. Như vậy là bạn đã thấy được sự khác biết của nó rồi. Xin nhắc lại là những thay đổi này đều chỉ có tác dụng khi chúng ta compiler project chứ không ảnh hưởng gì đến hiệu năng trong quá trình chạy. Đó là điểm mình thích nhất của package này. Chúc bạn áp dụng thành công.