一、bug起因
最近做公司的项目，对样式进行了修改后，新版本上线。测试那边经常说：修改的样式没有生效，我都是让他们清下浏览器缓存试试。可是到了正式环境，用户（也就是老总们）并不都一定知道清缓存这件事，导致一出问题就找我们，所以上面下死命令，要把这个问题解决掉。
二、解决方案
其实浏览器缓存是有好处的，第一次访问网站会从服务器获取静态的资源，然后将静态资源在游览器中缓存，下次用户在访问时，就直接获取游览器的缓存的静态资源，加快响应速度。但是同样也有弊端，当你更新样式或者图片资源的时候，再次访问就不会获取最新修改的静态资源。
解决的方案有三种：
1、用户自行清理浏览器缓存。
2、使用禁用缓存标签，实现禁用浏览器缓存。
3、为js和css文件添加版本号。
2.1 第一种方式
用户自行清理游览器缓存。这个不太现实，老总受不了。
2.2 第二种方式
在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" />
2.3 第三种方式
在引用的静态文件后添加版本号参数，这个参数可以是时间戳或者随机数。处理方式的代码如下：
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/plugins/layui-v2.5.5/layui/css/layui.css?v=20200110052406">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/style.css?v=20200110052406">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/addStyle.css?v=20200110052406">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/template/addStyle.css?v=20200110052406">
对于页面我们还是希望有缓存的，这样可以减轻服务器的压力，加快响应时间。需要解决的问题是：每次发布新版本重新部署后，第一次访问获取的是最新的静态资源，下次访问在走游览器的缓存。
综合上述分析，选用第三种方式：加版本号，但是一个文件里面有好多css和js，手动添加太费劲了。有没有其他的什么好办法呢，当然有啊，根据大佬的建议，使用maven插件：maven-replacer-plugin来完成。
具体操作是：通过 maven-replacer-plugin在项目打包 package（mvn package）时会自动为静态文件中的js或者css追加例如： xxx.js?v=time 的后缀，从而解决修改后浏览器缓存问题，需要注意的是此插件只会在生成 war 包源码时生效，不需要修改任何代码。
三、操作步骤
3.1 修改pom文件
在properties标签里添加版本号样式，例如：
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version>
<!-- 版本号样式-->
<maven.build.timestamp.format>yyyyMMddHHmmss</maven.build.timestamp.format>
</properties>
前面的配置是配置项目编码及java版本号用的，所以不用管，主要是最后一行配置
然后添加maven-replacer-plugin插件：如下
<!--清除浏览器缓存-->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>3.0.0</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/views/assess/assess-list.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>
${build.finalName}/WEB-INF/views/assess/assess-list.jsp代表需要替换的页面的具体位置，可以配置多个include，代表修改多个页面
也可以使用 ${build.finalName}/WEB-INF/jsp/*.html 来替换所有jsp目录下所有html文件。
3.2 执行 mvn clean package
清除之前的版本包，并重新打包。
3.3 验证打包后项目中的war包是否生效。
未配置maven-replacer-plugin 插件前打包后template_main.jsp部分内容如下：
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/plugins/layui-v2.5.5/layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/style.css">
配置maven-replacer-plugin 插件前打包后template_main.jsp部分内容如下：
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/plugins/layui-v2.5.5/layui/css/layui.css?v=20200110052406">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/style.css?v=20200110052406">
注意：配置完pom文件后可能会报红，需要手动从远程仓库更新依赖，idea里是点击那个类似刷新的按钮
image.png
四、总结
如果你的项目是maven项目，如果你的项目打出来是war包，那就赶紧试一试吧。参考文献：https://blog.csdn.net/ljk126wy/article/details/103911421
————————————————
版权声明：本文为CSDN博主「陌上、波寒雨」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/chen_bo526/java/article/details/103923070
网友评论