ASP.NET Core MVC 避免 JavaScript 暫存方式

平時在使用 JavaScript, css, 或是圖片檔案時，通常瀏覽器為了節省網路流量，會很聰明的將他認為相同的檔案做暫存，不過在開發中這樣的善舉卻會對我們造成不小的問題，有時候明明功能就是寫好了，但是在瀏覽器上就是看不到，在除錯中花費許多問題，最後才發現只是因為 js 檔案還是暫存檔，未更新到新版的檔案。

常見的解決方式就是在連結後面加上一串會自動變更的內容，讓瀏覽器不會用到舊的 cache。例如:

    
<script src="~/js/site.js?v=2023021623011234"></script>
    

之前就有看過在 cshtml 中使用 C# 語法取得日期時間的解決方式:

    
<script src="~/js/site.js?v=@Html.Raw(@Html.Raw(DateTime.Now.ToString("yyyyMMddHHmmssffff")))"></script>
    

不過其實在 ASP.NET Core MVC 中的標籤協助程式就有內建的方式可以非常簡單的解決這件事。

加上 asp-append-version="true" 後就會在連結後方附加 「?v=」 再加上檔案內容雜湊值(使用 SHA256)，對瀏覽器來說就是新的內容，會重新載入，不會使用 cache 的內容。

    
<script src="~/js/site.js" asp-append-version="true"></script>
    

開啟一個新的 ASP.NET Core MVC 7 專案就會看到 site.js 檔案有加上雜湊值，而 jquery 和 bootstrap 的 js 並沒有。

    

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
    

依照範例內容，以後我們只要在會變動的靜態檔案引用中加上 asp-append-version="true" ，就可以避免快取問題，並且雜湊值是檔案有變更才會不一樣，在未變更時也依然能夠使用暫存，非常方便。

參考資料：
StackOverflow - How does javascript version (asp-append-version) work in ASP.NET Core MVC?