ASP.NET MVC5 - 自製 js/css 自動版本參數防止 Cache 舊版惹禍

2020-04-26 08:02 AM

系統上線再踩到 js/css 換版但使用者瀏覽器續用 Cache 舊版出錯的坑，嚴格說來是低級錯誤，最簡單做法是 URL 加上 ?v=版本參數，每次換版就改參數，即可保證不會讀到 Cache 舊版惹禍。ASP.NET MVC ScriptBundle 內建依檔案內容計算 SHA256 雜湊碼產生 v 參數機制，檔案一異動 v 參數便會同步更新；ASP.NET Core 則有 asp-append-version TagHelper，也是依據檔案內容改變參數，提供強大的阻絕舊版 Cache 防護。

我比較喜歡 asp-append-version 的點子，直接用在 js、css 上，不必跟打包壓縮功能綁在一起，運用起來較簡便彈性，但我的專案是 ASP.NET MVC5，沒法用 ASP.NET Core 的新發明。找到幾個現成 NuGet Package，但對 Cache 採用的逾時更新機制不滿意，覺得結合 FileChangeMonitor 檔案一修改就更新才是王道，一來可節省不必要的雜湊運算，二則由檔案異動觸發重算不會有任何延遲更高級。反正原理很簡單，不如自己寫一個當成練功好了。

就醬，花了 20 分鐘，40 行程式碼搞定：

using System.IO;
using System.Web;
using System.Web.Hosting;
using System.Web.Mvc;
using System.Runtime.Caching;
using System.Security.Cryptography;

namespace AssetVersioning
{
    public static class AssetVersioningExt
    {
        public static MvcHtmlString Script(this HtmlHelper html, string src) 
            => MvcHtmlString.Create($@"<script src=""{GetPathWithHash(src)}""></script>");

        public static MvcHtmlString Css(this HtmlHelper html, string href)
            => MvcHtmlString.Create($@"<link href=""{GetPathWithHash(href)}"" rel=""stylesheet"" />");

        public static string GetPathWithHash(string path)
            => $"{VirtualPathUtility.ToAbsolute(path)}?v={GetFileHash(path)}";

        static MemoryCache cache = MemoryCache.Default;
        public static string GetFileHash(string path)
        {
            var physicalPath = HostingEnvironment.MapPath(path);
            if (!File.Exists(physicalPath)) return string.Empty;
            string cacheKey = $"__asset_hash__{path}";
            if (cache.Contains(cacheKey)) return cache[cacheKey] as string;
            using (SHA256 sha256 = SHA256.Create())
            {
                var hash = HttpServerUtility.UrlTokenEncode(
                    sha256.ComputeHash(File.ReadAllBytes(physicalPath)));
                var policy = new CacheItemPolicy();
                policy.ChangeMonitors.Add(new HostFileChangeMonitor(new string[] { physicalPath }));
                cache.Add(cacheKey, hash, policy);
                return hash;
            }
        }
    }
}

使用方法如下：(Index.cshtml)

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    @Html.Css("~/Css/main.css")
</head>
<body>
    <div>
        ASP.NET MVC Rocks!
    </div>
    @Html.Script("~/Scripts/main.js")
</body>
</html>

簡單測一下，main.css 與 main.js 後方自動加上了 ?v=ZuTN8S... 參數：