# ASP.NET MVC 打包(Bundling)及壓縮(Minification)功能

:::info
提醒，mvc core 中預設沒有bundle了，需要額外下載套件，可以參考這篇
[軟體主廚的程式料理廚房-[食譜好菜] BundleConfig 在 ASP.NET Core 還存在嗎？](https://dotblogs.com.tw/supershowwei/2017/07/26/164153)
:::

## 問題
常常有 user 遇到問題 因為js沒有更新到，需要按重新整理
但可以在 script src="my.js?q=當下日期" 這樣就100%更新了，可是這樣變成每次user都重新下載js，浪費頻寬速度又慢，有沒有辦法自動生成?

這邊可以使用 asp.net MVC 的 bundle 功能，來完成這個目標，還能順便把js css壓縮

## MVC提供方便的Bundling功能，可以把css、js打包壓縮，只要兩個步驟就完成了

1.在BundleConfig.cs設定好所有要打包的東西，

bundles.Add(new StyleBundle("~/Content/css").Include(
                            "~/Content/site.css",
                            "~/Content/font-awesome.min.css"
                           ));
bundles.Add(new ScriptBundle("~/bundles/jquerytimepicker").Include(
   "~/Scripts/jquery-ui-timepicker-addon.js", 
   "~/Scripts/jquery-ui-timepicker-zh-TW.js"
  ));

2.在頁面上使用

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

就可以了

**要注意的是，** @Styles.Render("~/Content/css")**的結尾必須使用/css，才能正常執行**

補充，有時候可能，若是想檢查是否有正常載入各個檔案，可以在BundleConfig.cs中，將EnableOptimizations 設定為false，網頁上就會顯示未壓縮的檔案狀態

// 將 EnableOptimizations 設為 false 以進行偵錯。如需詳細資訊，
BundleTable.EnableOptimizations = false;

參考資料：
* [ASP.NET MVC 4 RC的JS/CSS打包壓縮功能](http://blog.darkthread.net/post-2012-06-05-aspnet-mvc4-bundle-and-minify.aspx)
* [軟體主廚的程式料理廚房-[食譜好菜] BundleConfig 在 ASP.NET Core 還存在嗎？](https://dotblogs.com.tw/supershowwei/2017/07/26/164153)

###### tags: `程式設計`