你修改了样式，却要我手动清除游览器缓存，这是BUG！

1. 事件背景

公司网站首页的样式进行了大量改版，但是上测试线后，测试同事对我说：怎么还是原来的效果，没有任何变化啊。听到这样的问题，我们第一反应是游览器缓存。你清除一下游览器缓存，或者换一个游览器。

手动清除游览器缓存虽然可以解决问题，但是用户根本不知道啥是缓存，也不会手动清楚游览器缓存。我不管！这个是BUG，不解决这个BUG 不能上线。

嗯… 你说的有道理，我马上去修改！

2. 解决方案

游览器缓存是个好东西，第一次访问网站会从服务器获取静态的资源，然后将静态资源在游览器中缓存，下次用户在访问时，就直接获取游览器的缓存的静态资源。但是当你更新样式或者图片资源的时候，再次访问就不会获取最新修改的静态资源。

解决的方案有3种：

1. 用户自行清理游览器缓存。
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" />

  
  

  
  
1
2
3
4

第三种方式：在引用的静态文件后添加版本号参数，这个参数可以是时间戳或者随机数。处理方式的代码如下：

<link rel="stylesheet" type="text/css" href="/css/app.min.css??v=201806251715" />
<script src="/js/base.min.js?v=201806251715"></script>

  
  

  
  
1
2

对于网站首页我们还是希望有缓存的，这样可以减轻服务器的压力。需要解决的问题是：每次更新后，第一次访问获取的是最新的静态资源，下次访问在走游览器的缓存。

综合上述分析，选用第三种方式：加版本号，但是一个文件里面有好多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>

  
  

  
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

${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>

  
  

  
  
1
2

配置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>

  
  

  
  
1
2

4. 总结

如果你也遇到此类问题，加紧应用起来吧。前提是你的项目是 maven 项目。

5.参考文献

1、https://www.cnblogs.com/yclimb/p/9934102.html

2、点击查看原文