ASP.NET MVC 4 Bundling 與 Minification 整合教學：JS/CSS 合併壓縮優化（第 3 節）

前言

MVC 4 內建 Bundling & Minification 機制，透過合併多個 JS/CSS 檔案為單一請求、移除空白註釋、縮短變數名稱，大幅減少 HTTP 請求數與傳輸體積，提升頁面載入速度。本節詳細解析 BundleConfig 設定、使用方式、最佳化模式切換與進階技巧。

BundleConfig 核心設定

public class BundleConfig {
    public static void RegisterBundles(BundleCollection bundles) {
        // jQuery 腳本包 (版本通配)
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
            "~/Scripts/jquery-{version}.js"));

        // jQuery UI
        bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
            "~/Scripts/jquery-ui-{version}.js"));

        // 驗證腳本
        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
            "~/Scripts/jquery.unobtrusive*",
            "~/Scripts/jquery.validate*"));

        // Modernizr (開發版)
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
            "~/Scripts/modernizr-*"));

        // CSS 樣式包
        bundles.Add(new StyleBundle("~/Content/css").Include(
            "~/Content/site.css"));

        // jQuery UI CSS 主題
        bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
            "~/Content/themes/base/jquery.ui.core.css",
            "~/Content/themes/base/jquery.ui.resizable.css",
            "~/Content/themes/base/jquery.ui.selectable.css",
            "~/Content/themes/base/jquery.ui.accordion.css",
            "~/Content/themes/base/jquery.ui.autocomplete.css",
            "~/Content/themes/base/jquery.ui.button.css",
            "~/Content/themes/base/jquery.ui.dialog.css",
            "~/Content/themes/base/jquery.ui.slider.css",
            "~/Content/themes/base/jquery.ui.tabs.css",
            "~/Content/themes/base/jquery.ui.datepicker.css",
            "~/Content/themes/base/jquery.ui.progressbar.css",
            "~/Content/themes/base/jquery.ui.theme.css"));
    }
}

Global.asax 註冊

protected void Application_Start() {
    AreaRegistration.RegisterAllAreas();
    FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
    RouteConfig.RegisterRoutes(RouteTable.Routes);
    BundleConfig.RegisterBundles(BundleTable.Bundles);  // 關鍵行
}

View 中引用 Bundle

    
    
    
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")


    @RenderBody()
    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)

開發模式 vs 最佳化模式

啟用最佳化的兩種方式

// 方式二：BundleConfig.cs 末尾強制啟用 (忽略 debug 設定)
BundleTable.EnableOptimizations = true;

最佳化後輸出範例

開發模式：




最佳化模式：

Firebug 效能對比

進階技巧

1. 自訂忽略清單 (預設排除 .min.js、.min.css、-vsdoc.js 等)

BundleTable.Bundles.IgnoreList.Clear();
BundleTable.Bundles.IgnoreList.Ignore(".min.js", OptimizationMode.Always);
// BundleTable.Bundles.IgnoreList.Ignore("-vsdoc.js", OptimizationMode.Always);
// BundleTable.Bundles.IgnoreList.Ignore(".debug.js", OptimizationMode.Always);

2. CDN 回退機制

bundles.Add(new ScriptBundle("~/bundles/jquery", "//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.0.min.js")
    .Include("~/Scripts/jquery-{version}.js"));

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

3. 非同步載入非關鍵 CSS/JS

@Scripts.RenderFormat("", "~/bundles/noncritical")

4. 版本快取策略

查詢字串 ?v=hash 由檔案內容雜湊產生，內容變更自動更新快取，無需手動版本號管理。

現代替代方案：Webpack / Vite / esbuild

結語

MVC 4 Bundling & Minification 以零配置實現顯著效能提升，是傳統 MVC 專案的標準優化手段。理解其運作機制 (合併、壓縮、快取雜湊、模式切換) 有助於排查載入問題。現代前端工程化專案建議遷移至 Webpack/Vite 等建置工具，獲得模組化、熱更新、Tree Shaking 等進階能力。