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包下去看源码才能看到,并且对代码也改动非常小。







评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值