Khái niệm Bundling và Minification

• Bundling (Gộp tệp): Gom nhiều tệp JavaScript hoặc CSS riêng lẻ thành một tệp duy nhất.
• Minification (Thu gọn mã): Loại bỏ khoảng trắng thừa, chú thích, rút gọn tên biến để giảm thiểu dung lượng tệp tải về.

Cách cấu hình trong BundleConfig.cs

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                    "~/Content/bootstrap.css",
                    "~/Content/site.css"));

        // Bật tối ưu hóa tự động
        BundleTable.EnableOptimizations = true;
    }
}

Cách sử dụng tại View

<!DOCTYPE html>
<html>
<head>
    @Styles.Render("~/Content/css")
</head>
<body>
    @Scripts.Render("~/bundles/jquery")
</body>
</html>

Lợi ích hiệu năng trong hệ thống Enterprise

1. Giảm số lượng HTTP Requests: Trình duyệt có giới hạn số lượng kết nối đồng thời đến cùng một tên miền. Gộp tệp giúp giảm số lượng Request đáng kể.
2. Giảm băng thông: Kích thước tệp sau khi Minification nhỏ hơn nhiều, giúp tăng tốc độ tải trang trên các thiết bị di động hoặc kết nối mạng kém.

Lưu ý thực chiến Enterprise

Khi BundleTable.EnableOptimizations = true, các tệp sẽ được nén và sinh mã hash phiên bản tự động để phá vỡ bộ nhớ đệm (browser cache) của trình duyệt mỗi khi bạn cập nhật phiên bản mã nguồn mới.