1. 程式人生 > >解決修改css或js檔案後,瀏覽器快取未更新問題

解決修改css或js檔案後,瀏覽器快取未更新問題

問題描述:最近在上線新版本專案的時候,發現有的使用者的操作還是呼叫的老版本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不同步更新的問題。一個小小的細節,可以給我們帶來很大的方便。