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

最新推荐文章于 2024-09-15 22:51:50 发布

不知道取啥昵称

最新推荐文章于 2024-09-15 22:51:50 发布

阅读量3.8k

点赞数

分类专栏： Maven 文章标签： css 缓存浏览器

本文链接：https://blog.csdn.net/winy_lm/article/details/78124554

版权

Maven 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

解决问题：

防止浏览器缓存，修改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包下去看源码才能看到，并且对代码也改动非常小。