关于js/css修改文件后浏览器缓存不更新的探讨

使用场景： 每次修改了js/css文件，重新发版后，用户访问时，浏览器总是会缓存了发版前的样式，想要获取最新的样式，需要Ctr+F5清除缓存并刷新，用户体验不好。所以，我们希望每次发版，用户正常访问就能获取最新的样式，以下是我从各处搜罗的几种方式：

方式一、使用messages.properties文件

1、目录结构：注意文件名不要写错了，默认放的位置在resources下

2、messages.properties内容: 定义版本号

js.version=3.0.1

3、修改js/css引用
js/css引用修改前：使用thymeleaf引用

<script type="text/javascript" th:src="@{/js/jquery-3.4.1.js}"></script>
<link rel="stylesheet" th:href="@{/css/default.css}">

js或者css引用修改后：

<script type="text/javascript" th:src="@{/js/jquery-3.4.1.js(v=#{js.version})}"></script>
<link rel="stylesheet" th:href="@{/css/default.css(v=#{js.version})}">

4、重启项目后再访问，发现后js/css后面已经加号好了版本号

原文地址： https://blog.csdn.net/Zs__shuai/article/details/88086515

方式二、使用maven插件maven-replacer-plugin（推荐）

1、在POM.xml设置打包方式为war包。

  <packaging>war</packaging>

2、在POM.xml添加插件

  <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <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>${project.build.directory}</basedir>
                    <!-- 替换的文件所在目录规则，需要根据自己的需求灵活修改 -->
                  <includes>
       <include>${project.build.finalName}/WEB-INF/**/templates/*.html</include>
        <include>${project.build.finalName}/WEB-INF/**/templates/**/*.html</include>
                  </includes>
                    <replacements>
         <!-- 在css/js文件末尾追加?v=时间戳，反斜杠表示字符转义，token默认是正则匹配 -->
                        <replacement>
                            <token>\.css\"</token>
                           <!--在css后添加时间戳 -->                     		 
                           <value>.css?v=${maven.build.timestamp}\"</value>
                        </replacement>
                        <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>\.css\}\'</token>
                            <value>.css?v=${maven.build.timestamp}\}\'</value>
                        </replacement>
                        <replacement>
                            <token>\.js\"</token>
                            <!--在js后添加版本号 -->       
                            <value>.js?v=${jsVersion}\"</value>
                        </replacement>
                        <replacement>
                            <token>\.js\'</token>
                            <value>.js?v=${jsVersion}\'</value>
                        </replacement>
                         <replacement>
                            <token>\.js\}\"</token>
                            <value>.js?v=${jsVersion}\}\"</value>
                        </replacement>
                        <replacement>
                            <token>\.js\}\'</token>
                            <value>.js?v=${jsVersion}\}\'</value>
                        </replacement>
                    </replacements>
                </configuration>
            </plugin>
        </plugins>
    </build>

3、在POM.xml添加properties，用于定义在js/css后添加时间戳还是版本号，可以根据自己需求选择。

<properties>
        <!-- maven.build.timestamp 默认时间戳格式，在js后添加的时间戳 -->
        <maven.build.timestamp.format>yyyyMMddHHmmss</maven.build.timestamp.format>
         <!--jsVersion 在js后添加版本号  -->
        <jsVersion>2.1.1</jsVersion>
</properties>

4、打包后，查看war包源码，发现js后已经添加了版本号，css后加了时间戳

<script type="text/javascript" th:src="@{/js/jquery-3.4.1.js?v=2.1.1}"></script>
 <link rel="stylesheet" th:href="@{/css/default.css?v=20200722021837}">

注意： 这种方式，只是对打war包的源码做修改，对源码并不起作用。

原文地址： https://blog.csdn.net/yclimb/article/details/79583759

方式三、在公共js定义一个版本号，作为全局引用

1、创建utils.js，并新建版本号变量，前提是： 工具类js，一般不修改

'use strict';
let Utils=(function () {
    return {
        jsVersion: '2.0.0'
    }
})();

2、引用步骤（较为麻烦）

    <!--引入utils.js -->   
    <script th:src="@{/js/utils.js}"></script>
      <!--获取utils.js内的版本号-->   
    <script> let version=Utils.jsVersion</script>
      <!--引用版本号 -->   
    <script type="text/javascript" th:src="@{/js/jquery-3.4.1.js?v=version}"></script>
    <link rel="stylesheet" th:href="@{/css/default.css?v=version}">

3、页面重新渲染后，我们可以发现version已经获取到版本号

综上，个人觉得第二种比较方便，有不同意见欢迎留言，共同探讨！

希望可以帮到你！如有侵权，联系删除！

												灰色稻草人