ASP.NET Web Forms 以 System.Web.Optimization 取代 SquishIt 實作 JS/CSS 打包

1. NuGet 安裝套件

Install-Package Microsoft.AspNet.Web.Optimization

2. 建立 BundleConfig.cs (置於 App_Code)

using System.Web.Optimization;

public class BundleConfig {
  public static void RegisterBundles(BundleCollection bundles) {
    bundles.Add(new StyleBundle("~/bundles/news.css")
      .Include("~/common/screen_base.css", "~/common/screen_news.css"));
    bundles.Add(new ScriptBundle("~/bundles/news.js")
      .Include("~/script/news_common.js", "~/script/detail.js", "~/script/share.js"));
  }
}

3. Global.asax Application_Start 註冊

BundleConfig.RegisterBundles(BundleTable.Bundles);

4. ASPX 頁面引用

<head>
  <title>IT新聞 - 博客園</title>
  <%: System.Web.Optimization.Styles.Render("~/bundles/news.css") %>
  <%: System.Web.Optimization.Scripts.Render("~/bundles/news.js") %>
</head>

5. 執行結果

<link href="/bundles/news.css?v=sWIyZt7YgHul_fjj5uctLQ6NK499bBwg7ev8KRgojN01" rel="stylesheet"/>
<script src="/bundles/news.js?v=h7kkNXn83HAKCJJjw2VNEzbW_hHG-e5sAPoNOs_2Cx41"></script>

關鍵差異：SquishIt vs System.Web.Optimization