編碼的世界 / 優質文選 / 生涯

解決修改css或js文件後,瀏覽器緩存未更新問題


2022年3月28日
-   

問題描述:最近在上線新版本項目的時候,發現有的用戶的操作還是調用的老版本JS裏面的內容,這樣就造成原來新的JS裏面加上的限制不能限制用戶的操作,從而導致用戶可以重複操作。
問題產生原因:
       如果在用戶之前已經訪問過系統,那麼瀏覽器中會緩存該系統的CSS、JS,這些CSS、JS緩存未過期之前,瀏覽器只會從緩存中讀取CSS和JS,如果在服務器上修改了css和js,那麼這些修改在用戶的瀏覽器中是不會有變化的。
解決方式一:
       用戶按Ctrl + F5強制刷新頁面或者手動清空了瀏覽器的緩存。此時瀏覽器會重新向服務器獲取CSS和JS文件,新的文件便會生效。
解決方式二:
       但是用戶量過大的時候總不能讓每個用戶一一清理緩存吧,於是便從代碼的角度著手解決這個問題。在js後面添加版本號,讓瀏覽器把這個JS文件當做新的文件重新向服務器獲取資源。
加版本號前:
<script type="text/javascript" th:src="@{/js/test/index.js}"></script>

加版本號後:
<script type="text/javascript" th:src="@{/js/test/index.js?v=1.0}"></script>

此時問題解決,CSS與上類似。
問題延伸:
       但是JS文件或CSS過多的情況下需要一個一個的去修改版本號,會花費大量的時間,此時就需要版本號是動態獲取的了。
更換為從messages.properties中讀取
<script type="text/javascript" th:src="@{/js/test/index.js(v=#{js.version})}"></script>

目錄結構如下

messages.properties內容如下
js.version=2.0

注意:如果要讀取到配置文件內容,配置文件名必須是messages.properties。否則會出現以下錯誤

下面是正常的

到此動態修改JS文件版本號結束。當然配置文件名也支持自定義,只需在application.yml文件中加入一下內容指定文件名
spring:
messages:
basename: test

此時可以將messages.properties文件更換為test.properties,指定文件名的時候也可以加上文件目錄,不一定放在resources目錄下,只是默認在這個目錄下。
總結:
      通過對JS的改動就可以使瀏覽器重新從服務器獲取JS文件,雖然只是一個小的需求,但是減小了用戶操作的麻煩以及JS不同步更新的問題。一個小小的細節,可以給我們帶來很大的方便。

熱門文章