学习笔记:Maven构造版本号的方法解决浏览器缓存问题

需要解决的问题

  在做WEB系统开发时,为了提高性能会利用浏览器的缓存功能,其实即使不显式的申明缓存,现代的浏览器都会对静态文件(js、css、图片之类)缓存。但也正因为这个问题导致一个问题,就是资源的缓存逻辑有时出现问题后服务器的最新版本文件无法更新客户端的缓存。

  这个问题会给用户产生许多的困扰,当然首先是测试人员会很头痛,一些看起来没有修复的bug为什么开发要说做好了?这种时候我会无奈的说:ctrl+f5刷新一下。但这毕竟不是解决问题的方法。

思路与方法考虑

思路

之前没有着手处理过这样的问题,只是知道缓存可以通过时间戳、版本戳的方式来解决。说白了就是让link的url不一样浏览器自然会下载最新版本,想想这不是挺容易的事情嘛。项目紧也就没当回事,等有时间了再来解决这个问题。

  好了,最近有时间了开始解决。找了许多的方法,发现这确实是简单的加一个版本号/时间戳就能解决:

<link rel="stylesheet" type="text/css" href="/css/common.css?ver=${sysVersion}" />

上面代码中在资源后面加了一个?ver=${sysVersion}

注:项目中使用的是velocity,所以${sysVersion}是指velocity中的变量。

新的问题

  但一个新问题产生,我们是使用hudsun+maven来进行构造并自动发布及部署到web服务器上。那么我们如何在maven构造时打上一个版本戳呢?

方法

  1. 通过某种方法生成一个版本号写入到文件,系统启动时加载此版本号,这样velocity就能够使用这个版本号从而解决缓存更新的问题。这种就是单一的统一版本号方法。
  2. 通过前端的编译工具,grunt、F.I.S这类工具来完成,特别是F.I.S可以实现md5戳的模式,直接针对单个资源进行版本更新,这样就比较精确也最大化了缓存的作用。

最后还是选择了第一种方法,因为集成前端编译工具的方法我没有搞定T_T,原因:

1、F.I.S需要基于Node.js,这个又要配置许多东西,有点麻烦,当我自己搭建环境就反复了许多天,后来发现是网络墙原因。

2、另外由于项目做的不是很规范,所以F.I.S生成时需要改动比较多的代码,这个是我这种懒人不太愿意做的

于是先用简单的方法解决之,最后经过1天的配置也确实完成了。

采用最简单的单一版本号

单一的版本号一下子就简化了解决问题的难度,只要想办法在发布时生成一个版本号即可,那就不管是时间、数字或者其他什么,所有的资源都引用此版本号即可。找到了一个maven的插件:maven-svn-revision-number-plugin,这个插件可以获取svn的版本号用作build号,这样的好处就是只要有代码提交就会有新版本产生。插件的代码如下:

          <plugin>
              <groupId>com.google.code.maven-svn-revision-number-plugin</groupId>
              <artifactId>maven-svn-revision-number-plugin</artifactId>
              <version>1.7</version>
              <configuration>
                  <verbose>true</verbose>
                  <entries>
                      <entry>
                          <prefix>prefix</prefix><!-- 版本戳的前缀-->
                          <depth>empty</depth>
                      </entry>
                  </entries>
              </configuration>
              <executions>
                  <execution>
                      <phase>validate</phase><!-- 生命周期阶段-->
                      <goals>
                          <goal>revision</goal>
                      </goals>
                  </execution>
              </executions>
              <dependencies>
                  <dependency>
                    <groupId>org.tmatesoft.svnkit</groupId><!-- 由于使用的是svn1.8版本,所以需要依赖这个插件-->
                    <artifactId>svnkit</artifactId>
                    <version>1.8.9</version>
                  </dependency>
              </dependencies>
          </plugin>  

这个插件的作用是在maven构造时获取最新的svn版本号,然后利用maven的resources的filtering来在各个配置文件中作用变量使用。这样就实现了构造时将版本号写入文件。

resources的代码:

      <resources>
        <resource>
            <directory>src/main/resources</directory>
            <includes>
                <include>**.properties</include><!-- 只对properties文件进行处理-->
            </includes>
            <filtering>true</filtering><!-- 表示开启变量嵌入 -->
        </resource>
        <resource>
            <directory>src/main/resources</directory>
                <excludes>
                    <exclude>**.properties</exclude>
                </excludes>
            <filtering>false</filtering>
        </resource>        
      </resources>

因为使用properties文件作为载体,所以上述的设置目的就是找到properties文件然后写入版本号,我建了一个build_version.properties文件,里面写了一个设置项:

build.version=${prefix.committedRevision}
${prefix.committedRevision}就可以获取maven-svn-revision-number-plugin插件生成的版本号。这样设置好了后,使用Maven install就可以看到效果了,构造后在target目录找到build_version.properties文件查看内容:
build.version=114912

此时就变成了一个数字。

在此看一看maven-svn-revision-number-plugin插件中会产生哪些变量:

[INFO] --- maven-svn-revision-number-plugin:1.7:revision (default) @ zrtc ---
[INFO] inspecting E:\workspace\web
[INFO]   prefix = prefix
[INFO]   depth = empty
[INFO]   report unversioned = true
[INFO]   report ignored = false
[INFO]   report out-of-date = false
[INFO]  collecting status information
[INFO]       114969 114912 E:\workspace\web
[INFO]  setting properties
[INFO]   prefix.repository = 
[INFO]   prefix.path = 
[INFO]   prefix.revision = 114969
[INFO]   prefix.mixedRevisions = false
[INFO]   prefix.committedRevision = 114912
[INFO]   prefix.committedDate = 2015-10-23 09:03:39 +0800 (Fri, 23 Oct 2015)
[INFO]   prefix.status = 
[INFO]   prefix.specialStatus = 

可以看到插件有几个变量,其中我使用了committedRevision,这个就是项目svn目录最后一次提交的版本。revision 则是svn最新的版本号。在其他文件使用时需要加上prefix.这个前缀,这是在配置文件中定义过的,可以看上面的配置内容。

<prefix>prefix</prefix><!-- 版本戳的前缀-->

这个前缀自己取名就可以了。

自此功能完成,解决了资源版本更新的问题。看看浏览器前端页面源代码:

<link rel="stylesheet" href="/css/h_login.css?ver=114912" type="text/css">

未来的目标

 最近因为解决前端客户端资源更新的问题也看到了一些更好的方法,比如F.I.S这种前端工程构建工具。在了解的过程中知道了一个前端工程化的概念,有些大,但确实是未来的一种发展趋势。在B/S开发越来越深入的阶段,浏览器+服务器的这种开发平台已经证明了其优越性,移动互联网、云计算都已经体现了这种发展趋势。而浏览器是最近10年人们用的最多的软件了吧?而且浏览器已经证明了其无所不能,基于HTML+CSS就可以实现无数美秒的界面,原先常见的商业系统都也搬到了B/S架构下。可见HTML是多么牛逼的开发平台。

  站在这个时代如果还不能做点和时代相关的事情是不是感觉有点过时?所以在未来要思考一下前端系统的模块化,最终实现工程化。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android开发实战

Android P新增检测项 应用热修复受重大影响

最近关于热修复崩溃在Android P 版本的内容持续增高,也许这个commit可以帮到你.

62330
来自专栏noteless

windows资源管理器多标签打开 windows文件夹多标签浏览 浏览器tab页面一样浏览文件夹 clover win8 win10 报错 无响应问题怎么解决 clover卡死 clover怎么换皮

Clover 是 Windows Explorer 资源管理器的一个扩展,为其增加类似谷歌 Chrome 浏览器的多标签页功能。

39830
来自专栏企鹅号快讯

系统方案合集-系统备份方案

导读 | 精选 一、方案特点 此方案是基于批处理脚本和任务计划技术,针对系统特有文件结构和数据库结构的特点,而形成的系统备份方案。该方案特点: 1.易用性好,通...

40570
来自专栏运维技术迷

清空messages没有权限的解决方法

一大早接到报警提示系统盘容量不足了,冲到/var/log下查看messages日志已经很大了,所以就想着把messages清空一下,以此来释放空间.在删除的时...

364100
来自专栏各种机器学习基础算法

npm下载报错情况的处理

npm是一个非常强大的包管理器,基本上前端需要的插件和框架在这上面都有,所以本人一直只用这个,其他的一律先忽视。然而使用npm时有时候会出现error以及无法下...

33780
来自专栏大数据平台TBDS

Hiveserver2 性能优化与GC优化

最近发现hiveserver2(本质上是提供jdbc连接的driver进程)经常发生严重卡死故障,而且卡死分成两种现象。

992100
来自专栏BeJavaGod

阿里巴巴Druid数据源,史上最强的数据源,没有之一

目前常用的数据源主要有c3p0、dbcp、proxool、druid,先来说说他们 Spring 推荐使用dbcp; Hibernate 推荐使用c3p0和pr...

39790
来自专栏腾讯移动品质中心TMQ的专栏

应用宝基于Robotium自动化测试(下)

基于Robotium自动化测试(上)》一文中小编介绍了框架选择、测试环境搭建、用例编写、跨应用处理等等内容,本文将承接上文,继续介绍测试报告生成、持续集成等等相...

22570
来自专栏前端vue

0.开发准备

Element 一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 easy-mock 一个可视化,并且能快速生成模拟数据的服务 Mo...

10230
来自专栏喵了个咪的博客空间

PhalGo-ADM思想

#PhalGo-ADM思想 关于ADM思想主要是指在API开发中使用API,Domain和Model三层结构,PhalGo从PhalApi中学习并且推崇这种设计...

38290

扫码关注云+社区

领取腾讯云代金券