1. 事件背景
公司網站首頁的樣式進行了大量改版，但是上測試線後，測試同事對我說：怎麼還是原來的效果，沒有任何變化啊。聽到這樣的問題，我們第一反應是遊覽器緩存。你清除一下游覽器緩存，或者換一個遊覽器。
手動清除遊覽器緩存雖然可以解決問題，但是用戶根本不知道啥是緩存，也不會手動清楚遊覽器緩存。我不管！這個是BUG，不解決這個BUG 不能上線。
嗯… 你說的有道理，我馬上去修改！
2. 解決方案
遊覽器緩存是個好東西，第一次訪問網站會從服務器獲取靜態的資源，然後將靜態資源在遊覽器中緩存，下次用戶在訪問時，就直接獲取遊覽器的緩存的靜態資源。但是當你更新樣式或者圖片資源的時候，再次訪問就不會獲取最新修改的靜態資源。
解決的方案有3種：
- 用戶自行清理遊覽器緩存。
- 使用禁用緩存標籤，實現禁用瀏覽器緩存。
- 爲js和css文件添加版本號。
第一種方式：用戶自行清理遊覽器緩存。這個不太現實，測試就直接給否決了。
第二種方式：在html頁面的head 頭中添加如下代碼：
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Cache" content="no-cache">
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
第三種方式：在引用的靜態文件後添加版本號參數，這個參數可以是時間戳或者隨機數。處理方式的代碼如下：
<link rel="stylesheet" type="text/css" href="/css/app.min.css??v=201806251715" />
<script src="/js/base.min.js?v=201806251715"></script>
對於網站首頁我們還是希望有緩存的，這樣可以減輕服務器的壓力。需要解決的問題是：每次更新後，第一次訪問獲取的是最新的靜態資源，下次訪問在走遊覽器的緩存。
綜合上述分析，選用第二種方式：加版本號，但是一個文件裏面有好多css和js，手動添加太費勁了。一位偉人曾經說過：辦法總比困難多。和老大商量後，最總決定是用 maven 插件：maven-replacer-plugin來完成。
具體操作是：通過 maven-replacer-plugin在項目打包 package（mvn package）時會自動爲靜態文件中的js或者css追加例如： xxx.js?v=time 的後綴，從而解決修改後瀏覽器緩存問題，需要注意的是此插件只會在生成 war 包源碼時生效，不需要修改任何代碼。
3.maven-replacer-plugin 使用介紹
第一步：在pom.xm中添加如下配置。
<properties>
<!-- 版本號樣式-->
<maven.build.timestamp.format>yyyyMMddHHmmss</maven.build.timestamp.format>
</properties>
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>2.4</version>
<configuration>
<!-- 使用緩存 -->
<useCache>true</useCache>
</configuration>
<executions>
<!-- 在打包之前執行，打包後包含已經執行後的文-->
<execution>
<id>prepare-war</id>
<phase>prepare-package</phase>
<goals>
<goal>exploded</goal>
</goals>
</execution>
</executions>
</plugin>
<plugin>
<groupId>com.google.code.maven-replacer-plugin</groupId>
<artifactId>replacer</artifactId>
<version>1.5.3</version>
<executions>
<execution>
<phase>prepare-package</phase>
<goals>
<goal>replace</goal>
</goals>
</execution>
</executions>
<configuration>
<!-- 自動識別到項目target文件夾 -->
<basedir>${build.directory}</basedir>
<!-- 替換的文件所在目錄或文件規則 -->
<includes>
<include>${build.finalName}/WEB-INF/jsp/template/template_main.jsp</include>
</includes>
<!-- 更改規則，在css/js文件末尾追加?v=時間戳，反斜槓表示字符轉義 -->
<replacements>
<replacement>
<token>\.css\"</token>
<value>.css?v=${maven.build.timestamp}\"</value>
</replacement>
<replacement>
<token>\.css\'</token>
<value>.css?v=${maven.build.timestamp}\'</value>
</replacement>
<replacement>
<token>\.js\"</token>
<value>.js?v=${maven.build.timestamp}\"</value>
</replacement>
<replacement>
<token>\.js\'</token>
<value>.js?v=${maven.build.timestamp}\'</value>
</replacement>
</replacements>
</configuration>
</plugin>
</plugins>
</build>
${build.finalName}/WEBINF/jsp/template/template_main.jsp:
代表只替換內容的文件中具體名稱。
也可以使用 ${build.finalName}/WEB-INF/jsp/*.html 來替換所有jsp目錄下所有html文件。
第二步：執行 mvn clean package;
第三步：驗證打包後項目中的war包是否生效。
未配置maven-replacer-plugin 插件前打包後template_main.jsp部分內容如下：
<link rel="stylesheet" type="text/css" href="/css/lib.min.css">
<script src="/js/base.min.js"></script>
配置maven-replacer-plugin 插件前打包後template_main.jsp部分內容如下：
<link rel="stylesheet" type="text/css" href="/css/lib.min.css?v=20200109054733">
<script src="/js/base.min.js?v=20200109054733"></script>
4. 總結
如果你也遇到此類問題，加緊應用起來吧。前提是你的項目是 maven 項目。
5.參考文獻
https://www.cnblogs.com/yclimb/p/9934102.html
