maven-replacer-plugin 静态资源打包方案js css

解决问题：

防止浏览器缓存，修改js  css后无效，需要强刷。

两种解决方案：

1. 不依赖插件，纯代码实现

1.1 实现拦截处理器：ModelAndViewInterceptor implements HandlerInterceptor

1.2 modelAndView.addObject("resourceVersion", this.getVersion());

1.3 

private String getVersion() {
String version = this.cacheService.getString(SystemManager.getAppName(), "ResourceVersion");
if(StringUtils.isEmpty(version)) {
version = String.valueOf(System.currentTimeMillis() / 1000L);
this.cacheService.set(SystemManager.getAppName(), "ResourceVersion", version, 2592000);
}

return version;
}

项目启动的时候，生成一个key值为  ResourceVersion 的放入缓存中，此处我放在redis . 这里取出来即可。

1.4 页面处理 : 引入文件处：  域名/static/order.js?${resourceVersion}

2. 依赖插件

项目主页：https://code.google.com/archive/p/maven-replacer-plugin/

项目pom.xml ：

<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>3.1.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>org.codehaus.mojo</groupId>
<artifactId>build-helper-maven-plugin</artifactId>
<version>3.0.0</version>
<executions>
<execution>
<id>timestamp-property</id>
<goals>
<goal>timestamp-property</goal>
</goals>
<configuration>
<name>build.time</name>
<pattern>MdHHmmssSSS</pattern>
<timeZone>GMT+8</timeZone>
</configuration>
</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>
<basedir>${build.directory}</basedir>
<includes>
<include>${build.finalName}/WEB-INF/views/*.vm</include>
<include>${build.finalName}/WEB-INF/views/**/*.vm</include>
</includes>
<replacements>
<replacement>
<token>\.css\"</token>
<value>.css?v=${build.time}\"</value>
</replacement>
<replacement>
<token>\.css\'</token>
<value>.css?v=${build.time}\'</value>
</replacement>
<replacement>
<token>\.js\"</token>
<value>.js?v=${build.time}\"</value>
</replacement>
<replacement>
<token>\.js\'</token>
<value>.js?v=${build.time}\'</value>
</replacement>
</replacements>
</configuration>
</plugin>
</plugins>
</build>

项目结构：



使用解释：

1. <useCache>true</useCache>，参见Stack Overflow  https://stackoverflow.com/questions/39105557/maven-replacer-plugin-to-replace-tokens-in-build-and-not-source

2. 多文件引入使用<basedir>${build.directory}</basedir>，参见Stack Overflow https://stackoverflow.com/questions/42248547/maven-replacer-plugin-with-multiple-files
3. 通过变量${maven.build.timestamp}获取的时间不是当前时区，故引入插件build-helper-maven-plugin

上面两种都能实现想要的效果，推荐项目中用的第二种，用户可以无感知。

第一种浏览器F12 下可以看到js  css文件后面带了小尾巴,类似  js?126985456987 ，

而第二种的话，只有取war包下去看源码才能看到，并且对代码也改动非常小。