Spring MVC 5下避免自定义JS文件缓存问题排查

我太懂你这种头疼的感觉了——每次改完JS代码，刷新页面却还是旧效果，全是浏览器缓存搞的鬼！之前试的方案没生效，大概率是配置没做全或者前端引用方式不对，下面给你一步步梳理Spring MVC 5里的正确解决姿势：

一、完善Spring MVC的资源处理器配置 #

你现有的MvcConfig需要补充版本策略的配置，Spring MVC 5推荐用ContentVersionStrategy（根据文件内容哈希生成版本号，文件不变版本号就不变，既保证长缓存又能在更新时自动失效）。完整的配置代码如下：

@Configuration
@EnableWebMvc
public class MvcConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        // 创建版本资源解析器，对/js下的所有文件启用内容哈希版本
        VersionResourceResolver versionResolver = new VersionResourceResolver()
                .addContentVersionStrategy("/js/**");

        registry.addResourceHandler("/js/**")
                // 这里替换成你实际的JS文件存放路径
                // 比如src/main/resources/static/js下就写classpath:/static/js/
                // 若在webapp/js目录下就写/js/
                .addResourceLocations("classpath:/static/js/")
                // 给浏览器设置长期缓存（因为版本号会自动变化，不用担心缓存过期问题）
                .setCacheControl(CacheControl.maxAge(365, TimeUnit.DAYS).cachePublic())
                .resourceChain(true) // 必须开启资源链，否则版本解析器不会生效
                .addResolver(versionResolver);
    }
}

二、前端必须用框架提供的方式引用JS #

光配置后端还不够，前端引用JS时不能直接写静态路径，必须用Spring提供的工具生成带版本号的URL，否则版本策略不会生效：

如果你用JSP视图： #

用<spring:url>标签生成路径：

<script src="<spring:url value='/js/custom.js' />"></script>

渲染后会自动变成类似 <script src="/js/custom-abc123.js"></script>，其中abc123是文件内容的哈希值，文件修改后哈希值会自动变化。

如果你用Thymeleaf视图： #

用@{...}表达式生成路径：

<script th:src="@{/js/custom.js}"></script>

Thymeleaf会自动识别后端的版本策略，帮你加上正确的版本号。

三、排查之前方案无效的常见坑 #

• 忘记开启资源链：如果没加.resourceChain(true)，版本解析器根本不会被激活，这是很多人踩的坑
• 前端引用方式错误：直接写<script src="/js/custom.js"></script>这种静态路径，Spring不会自动注入版本号，必须用框架提供的URL生成方式
• 资源路径不匹配：addContentVersionStrategy的路径要和addResourceHandler的路径对应，比如handler配的是/static/js/**，版本策略也要对应这个路径

四、备选方案：手动指定固定版本号 #

如果你不需要自动哈希的方式，也可以用固定版本号，每次更新代码时手动修改版本即可：

VersionResourceResolver versionResolver = new VersionResourceResolver()
        .addFixedVersionStrategy("v20240520", "/js/**");

这样生成的URL会是/js/custom.js?v=v20240520，更新时改版本号就能让客户端加载新文件。

内容的提问来源于stack exchange，提问作者user9565299