解决web项目发布新版本需要清除浏览器缓存的问题

解决的方案有三种:
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">
    

 

web项目中,页面缓存清除是指从浏览器缓存中删除已缓存的页面数据,以便在下次访问相同页面时重新获取最新版本的页面内容。这样可以保证用户能够看到最新的页面展示,而不是过时的缓存数据。 传统的做法是通过手动刷新浏览器清除页面缓存,但这种方法需要用户主动操作,不够便捷。为了解决这个问题,我们可以借助一些技术手段,实现自动清除页面缓存,而不需要每次刷新浏览器。 一种常见的方法是在网页的URL中加入一个时间戳或版本号参数。当页面内容发生改变时,例如更新了CSS样式或JS脚本,我们可以通过修改URL中的时间戳或版本号,使浏览器认为该页面是一个新的资源,从而强制重新加载页面内容。 另一种方法是使用HTTP响应头中的Cache-Control和Expires字段。通过设置这些字段的值为0或一个未来的日期,我们可以指示浏览器在访问该页面时不要使用缓存,而总是重新从服务器获取最新的页面内容。 除了以上两种方法,我们还可以使用一些前端开发框架或工具,如React、Angular或Vue.js等,在开发过程中自动处理页面的缓存清除。这些框架通常具有自动或手动的缓存清除机制,可以根据开发者的需求灵活配置。 总结来说,为了实现页面缓存清除,不需要每次刷新浏览器,我们可以通过在URL中添加时间戳或版本号参数、为HTTP响应头定义适当的缓存控制字段、或使用前端开发框架来自动处理缓存清除。这些方法都可以确保用户在访问web项目时能够得到最新的页面内容,提供更好的用户体验。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值