Java 如何确保 JS 不被缓存

大家好，我是 V 哥。今天咱们来聊一聊 Java 后端确保 JavaScript 不被缓存的问题，先来了解一下为什么需要这样做，通常源于以下几种场景或问题：

1. 先来看几个问题

1. 文件更新后无法及时生效

浏览器缓存机制是为了加快加载速度和减少服务器压力，但有时会带来问题。当 JavaScript 文件更新后，如果浏览器从缓存中加载旧版本，用户就无法看到最新的功能或修复的 Bug。举个例子：开发者发布了新版本的前端代码，修复了一个关键问题，但用户的浏览器仍然使用缓存的旧代码，导致问题依然存在。用户可能以为网站没修复或出现新问题，从而影响用户体验。

2. 前后端不一致

在 Java Web 应用中，JavaScript 通常用于与后端服务交互。如果 JavaScript 代码版本和后端逻辑不一致，可能导致不兼容问题。举个例子：后端接口的请求格式发生变化，但浏览器仍然使用旧的 JavaScript 代码，结果是客户端与服务器之间通信失败，产生错误。

3. 影响调试与开发

在开发和调试环境中，缓存会导致代码变更后无法即时看到效果，这对于调试过程非常不便。开发者可能会在调试中发现修改的代码没有被应用，导致浪费时间。举个例子：开发者修改了 JavaScript 文件，但由于缓存，浏览器继续执行旧的代码，开发者无法验证新代码是否正确，甚至可能以为代码本身有问题。

4. 安全问题

旧的缓存可能会暴露系统之前存在的漏洞。即使后端做了升级，修复了安全漏洞，但如果浏览器加载了旧的 JavaScript 文件，可能仍然会受到攻击。举个例子：假设某个版本的 JavaScript 中存在一个 XSS 漏洞。虽然新版本已经修复了这个漏洞，但浏览器缓存的旧文件仍然暴露在攻击风险中。

所以，如果前端页面无法及时响应更新（如修复 Bug、优化功能等），用户体验可能会受到负面影响。特别是在进行产品版本迭代时，缓存问题可能会使新功能看起来未上线，影响用户的使用体验和满意度。

2. 那要如何解决呢？

在 Java Web 开发中，为了确保 JavaScript 文件（或任何静态资源）不被浏览器缓存，可以使用以下几种经验：

1. 使用版本号或时间戳

为 JavaScript 文件的 URL 添加一个版本号或时间戳，使得每次文件更新后 URL 不同，这样浏览器会认为是新的资源，从而重新加载。比如：

<script src="app.js?v=1.0.1"></script>

或者使用动态的时间戳：

<script src="app.js?t=<%= System.currentTimeMillis() %>"></script>

通过这种方式，每次生成不同的查询参数，浏览器会认为这是一个新的文件，不会从缓存中读取。

2. 设置 HTTP 响应头

在 Java 后端（比如 Spring Boot 或 Servlet），可以通过设置 HTTP 头来控制缓存。常见的 HTTP 头包括：

• Cache-Control: 控制缓存行为。
• Pragma: 控制缓存行为（主要用于兼容 HTTP/1.0）。
• Expires: 设置资源过期的时间。

示例代码（Spring Boot 过滤器）：

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class NoCacheFilter implements Filter {
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) 
        throws IOException, ServletException {
        
        HttpServletResponse httpResponse = (HttpServletResponse) response;
        httpResponse.setHeader("Cache-Control", "no-store, no-cache, must-revalidate, max-age=0");
        httpResponse.setHeader("Pragma", "no-cache");
        httpResponse.setHeader("Expires", "0");
        
        chain.doFilter(request, response);
    }

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {}

    @Override
    public void destroy() {}
}

3. 配置静态资源的缓存策略

在 Spring Boot 项目中，可以通过配置类来定义静态资源的缓存策略。例如：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/js/**")
                .addResourceLocations("classpath:/static/js/")
                .setCachePeriod(0); // 0 表示不缓存
    }
}

通过 setCachePeriod(0) 设置缓存周期为 0，强制浏览器每次都从服务器获取最新的 JavaScript 文件。

4. 使用 ETag 或 Last-Modified

在 HTTP 响应中设置 ETag 或 Last-Modified，这样浏览器在每次请求时都会询问服务器资源是否更新。如果没有变化，服务器会返回 304 状态码，从而避免不必要的重新加载。

示例（设置 Last-Modified）：

httpResponse.setDateHeader("Last-Modified", System.currentTimeMillis());

上面的几种方法，能确保浏览器及时获取最新版本的 JavaScript 文件，不使用缓存的旧版本。

关于一些思考

问题来了，那什么时候可以使用缓存？

虽然缓存可能带来这些问题，但并不意味着缓存永远不好。在某些场景中，使用浏览器缓存可以显著提升性能：

• 静态资源（如 JavaScript、CSS 文件）较少更改时，缓存可以显著减少网络请求，提升页面加载速度。
• 确保在更新时有效控制缓存机制（比如用文件的版本号或哈希值作为文件名的一部分）可以避免不必要的重新下载和过度加载。

如何平衡？

通常，咱们不会完全禁止缓存，而是通过版本号、哈希、缓存控制头等方式来平衡性能和更新问题。这样，浏览器在没有必要时可以利用缓存，而在需要时也能获取最新的资源。关注威哥爱编程，码码通畅不掉发。