ASP.NET MVC - Bundle Cache Busting

在開發前端 Javascript 時常常要用到瀏覽器的 F12 開發人員模式來協助我們 Debug 程式，但是瀏覽器為了加速網頁載入速度預設會使用 Cache，所以有時候 Debug 會發現執行好幾次都是 Load 到舊程式，要清掉瀏覽器 Cache 才能載到新的程式，這樣實在是太麻煩了。


一般來說為了避免 Cache 的情形發生，開發人員會在載入的 JS 或 CSS 的檔名後面加上時間或隨機的字串，讓瀏覽器識別版本之間的差異，例如：

<script src="/Scripts/test.js?20160817115823"></script>
<link src="/Content/bootstrap?~v=LbLXK23XpTZF1499CzYUUB6EmrOW4qlZ8n8LH4pp6Mw1" rel="stylesheet" />

這種方式叫做 Cache Busting。

在 ASP.NET MVC 中可以使用 Bundle 的 Optimize 功能，程式在發布時會將 JS 與 CSS 檔 Minify 並加入 Busting，但是 Minify 後的 Javascript 實在是醜到超難 Debug 的，這時候該怎麼辦呢?

限量在 NuGet 找到一個可以解決這個困擾的套件，"System.Web.Optimization.HashCache"。

這個套件是 System.Web.Optimization 的擴充(System.Web.Optimization就是MVC Bundle 的 DLL)，其中我們只要原本的 Bundle 設定中加入以下程式碼：

BundleTable.Bundles.ApplyHashCache();

在執行期就會在 JS 與 CSS檔後方加入隨機字串，結果如下：

這樣一來就達到 Bundle Cache Busting 的效果，不用再擔心瀏覽器 Cache 住舊程式。
參考來源：
GitHub - System.Web.Optimization.HashCache