平時在使用 JavaScript, css, 或是圖片檔案時,通常瀏覽器為了節省網路流量,會很聰明的將他認為相同的檔案做暫存,不過在開發中這樣的善舉卻會對我們造成不小的問題,有時候明明功能就是寫好了,但是在瀏覽器上就是看不到,在除錯中花費許多問題,最後才發現只是因為 js 檔案還是暫存檔,未更新到新版的檔案。
常見的解決方式就是在連結後面加上一串會自動變更的內容,讓瀏覽器不會用到舊的 cache。例如:
之前就有看過在 cshtml 中使用 C# 語法取得日期時間的解決方式:
不過其實在 ASP.NET Core MVC 中的標籤協助程式就有內建的方式可以非常簡單的解決這件事。
加上 asp-append-version="true" 後就會在連結後方附加 「?v=」 再加上檔案內容雜湊值(使用 SHA256),對瀏覽器來說就是新的內容,會重新載入,不會使用 cache 的內容。
開啟一個新的 ASP.NET Core MVC 7 專案就會看到 site.js 檔案有加上雜湊值,而 jquery 和 bootstrap 的 js 並沒有。
依照範例內容,以後我們只要在會變動的靜態檔案引用中加上 asp-append-version="true" ,就可以避免快取問題,並且雜湊值是檔案有變更才會不一樣,在未變更時也依然能夠使用暫存,非常方便。
參考資料:
StackOverflow - How does javascript version (asp-append-version) work in ASP.NET Core MVC?
常見的解決方式就是在連結後面加上一串會自動變更的內容,讓瀏覽器不會用到舊的 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?
留言
張貼留言
如果有任何問題、建議、想說的話或文章題目推薦,都歡迎留言或來信: a@ruyut.com