解決修改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不一樣步更新的問題。一個小小的細節，能夠給咱們帶來很大的方便。