ASP.NET CSS 快取破解方案：自訂控制項自動附加版本戳記強制瀏覽器更新

部署新版 CSS 時，瀏覽器常因快取舊檔案導致版面錯亂。傳統解法需手動修改 `` 版本號，極易遺漏。本文實作一個 伺服器端自訂控制項，自動偵測 CSS 檔案最後修改時間並附加查詢字串，徹底解決快取問題。

控制項使用範例

<CWeb:CSSInclude ID="CSSInclude1" runat="server"
    EnableViewState="false"
    HRef="~/css/base.css"
    Rel="stylesheet"
    Type="text/css"
    CacheKey="BaseCSS" />

核心屬性

• HRef：CSS 檔案相對/虛擬路徑。
• Rel、Type：對應 `` 標籤屬性。
• CacheKey：快取索引鍵名稱（必填），用於儲存版本戳記。

版本戳記產生邏輯

private string GetIncludeUrlWithVersion()
{
    string url = string.Empty;
    string version = "1";

    if (string.IsNullOrEmpty(CacheKey))
        throw new ArgumentException("CacheKey 不可為空。");

    if (Page.Cache[CacheKey] == null)
    {
        FileInfo fileInfo = new FileInfo(Page.Server.MapPath(HRef));
        if (fileInfo.Exists)
        {
            version = fileInfo.LastWriteTime.ToString("ddMMyyyyhhmmss");
            CacheDependency dep = new CacheDependency(fileInfo.FullName);
            Page.Cache.Insert(CacheKey, version, dep);
        }
    }
    else
    {
        version = Page.Cache[CacheKey] as string;
    }

    return ResolveUrl(HRef) + "?v=" + version;
}

運作原理

1. 首次請求：讀取檔案 LastWriteTime 產生版本字串（精確到秒），存入 `Cache` 並建立 `CacheDependency` 監聽檔案變更。
2. 後續請求：直接從 `Cache` 取得版本字串，極高效能。
3. 檔案異動：`CacheDependency` 觸發移除快取，下次請求重新讀取新修改時間，版本號自動更新，瀏覽器視為新資源強制下載。

同樣適用於 JavaScript

同樣邏輯可封裝為 `JSInclude` 控制項，解決 `.js` 快取問題。此外，配合 IIS `OutputCache`、自訂 HTTP 標頭 (`Cache-Control: max-age=31536000, immutable`) 可進一步優化靜態資源快取策略。

優勢總結

• 零程式碼維護：部署新 CSS 即自動生效，無需改動頁面。
• 精確到秒：避免版本號衝突。
• 效能最佳：快取命中時零 I/O。
• 安全性：`CacheKey` 防止惡意佔用記憶體。