解决 CDN 缓存导致用户加载旧 JS 文件的问题

本文链接：https://blog.youkuaiyun.com/wcblog/article/details/145155352

在前端开发中，我们经常会遇到这样一个令人头疼的问题：

当我们修改了 js 文件并将其上线，并且为了强制浏览器重新加载新文件添加了时间戳，但部分用户仍然会加载旧的 js 文件，进而引发错误。今天，我将详细分析这个问题的原因，并给出一些行之有效的解决方案。

一、问题现象

当我们完成对 js 文件的修改并上线后，满心期待用户能够使用新的功能或修复后的代码，但却发现部分用户反馈系统出现错误。经过排查，发现这些用户加载的是旧的 js 文件，而不是我们更新后的文件。这可能会导致各种问题，例如新功能无法正常使用、界面显示异常或者出现一些难以预料的 bug。

二、问题原因分析

CDN 缓存机制

CDN（内容分发网络）的主要目的是为了提高用户的访问速度和性能，它会将静态资源存储在其众多的边缘节点服务器上。当用户请求这些资源时，CDN 会根据用户的地理位置等因素，从离用户最近的边缘节点提供服务。然而，当我们更新了源服务器上的 js 文件并添加时间戳时，CDN 的缓存机制却可能给我们带来一些麻烦。

CDN 并不会立即将最新的文件同步到所有的边缘节点，部分边缘节点可能仍然保留着旧的缓存副本。这是因为 CDN 的缓存更新可能存在一定的延迟，或者是按照预设的缓存策略进行更新，而不是实时更新。因此，当用户请求 js 文件时，可能会从这些还未更新的边缘节点获取资源，最终导致他们加载的是旧的 js 文件。

三、解决方案

1. 手动清空 CDN 缓存

这是一种比较直接的解决方法，当我们遇到用户加载旧文件的问题时，可以手动登录到 CDN 服务提供商的管理界面，找到缓存管理部分，然后清空相应的 js 文件缓存。这种方法在问题发生后确实能够解决问题，就像我之前遇到的情况一样，清空 CDN 的缓存后，用户就能正常加载新的 js 文件了。

不过，这种方法存在一些明显的缺点。首先，它需要人工手动操作，每次更新文件都需要记得去清空缓存，如果忘记了，就会导致问题再次出现。而且对于频繁更新的项目来说，手动操作会增加很多额外的工作量，容易出错。

2. 设置 CDN 缓存策略

大多数 CDN 服务提供商允许我们在其控制面板中设置缓存策略。我们可以将 js 文件的缓存时间设置得相对较短，例如将其设置为 1 小时或更短时间。这样，CDN 会相对频繁地从源服务器拉取最新的文件并更新其边缘节点的缓存。

然而，这种方法也并非完美无缺。过短的缓存时间虽然能保证用户较快地获取更新，但会对性能产生一定的影响。因为 CDN 会更频繁地从源服务器拉取资源，增加了网络传输和服务器的负担，可能会降低用户的访问速度。

3. 使用版本控制

为了避免缓存问题，我们可以将 js 文件的更新纳入版本控制。例如，我们原本的文件是 script.js，可以将其修改为 script-v1.0.js、script-v1.1.js 等。每次更新文件时，我们都更新文件的版本号，并在 HTML 中引用最新的版本，如

<script src="script-v1.1.js"></script>

这种方法的好处是，当文件更新时，用户会直接加载新的文件，因为文件名发生了变化，不会受到缓存的影响。但缺点是随着版本的增加，文件数量会逐渐增多，需要我们进行合理的文件管理，避免文件的混乱。

4. 使用 CDN 的缓存刷新功能

很多 CDN 提供商都提供了缓存刷新功能，这个功能可以通过 API 调用或者在其管理界面上进行操作。在更新文件后，我们可以调用该功能，让 CDN 主动刷新缓存，将最新的文件推送到边缘节点。

这种方法的优势在于可以实现自动化，我们可以在更新资源的同时调用 CDN 的缓存刷新功能，减少人工干预。例如，在一些自动化部署流程中，我们可以在更新代码后，通过脚本调用 CDN 的缓存刷新 API，确保用户能够尽快加载最新的文件。

5. 使用 HTTP 缓存头信息

在源服务器的响应中，我们可以通过设置 Cache-Control 和 ETag 等 HTTP 缓存头信息来控制缓存。

以下是一个使用 Java 作为后端服务器的示例代码：

import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.net.InetSocketAddress;
import com.sun.net.httpserver.HttpExchange;
import com.sun.net.httpserver.HttpHandler;
import com.sun.net.httpserver.HttpServer;

public class SimpleHttpServer {
    public static void main(String[] args) throws Exception {
        HttpServer server = HttpServer.create(new InetSocketAddress(8080), 0);
        server.createContext("/script.js", new MyHandler());
        server.setExecutor(null); // 使用默认的执行器
        server.start();
    }

    static class MyHandler implements HttpHandler {
        @Override
        public void handle(HttpExchange exchange) throws IOException {
            String filePath = "path/to/your/script.js";
            File file = new File(filePath);
            FileInputStream fis = new FileInputStream(file);
            byte[] bytes = new byte[(int) file.length()];
            fis.read(bytes);
            fis.close();

            // 可以根据文件内容或修改时间生成 ETag
            String etag = "your-etag-value"; 
            // 缓存 1 小时
            String cacheControl = "max-age=3600, must-revalidate"; 
            exchange.getResponseHeaders().set("Cache-Control", cacheControl);
            exchange.getResponseHeaders().set("ETag", etag);
            exchange.sendResponseHeaders(200, bytes.length);
            OutputStream os = exchange.getResponseBody();
            os.write(bytes);
            os.close();
        }
    }
}

在上述 Java 代码中：

首先，我们使用 HttpServer 创建一个监听在 8080 端口的服务器。
当接收到 /script.js 的请求时，会调用 MyHandler 进行处理。
在 MyHandler 中，我们读取 js 文件的内容到字节数组。
为文件设置 ETag，这里可以根据文件内容或修改时间生成一个唯一的 ETag 值，作为文件的标识符。
设置 Cache-Control 头信息，这里我们将缓存时间设置为 1 小时，并要求客户端必须重新验证。
最后将文件内容发送给客户端。

当用户的浏览器第一次请求该文件时，会缓存该文件并存储 ETag 值。当再次请求时，浏览器会将 ETag 发送给服务器，服务器会对比 ETag，如果文件未更新，会返回 304 状态码，告知浏览器使用缓存；如果文件更新了，会返回新的文件内容。

四、总结

通过上述几种方法，我们可以从不同的角度来解决 CDN 缓存导致用户加载旧 js 文件的问题。在实际应用中，我们可以根据项目的具体情况选择合适的方法，或者综合使用多种方法。例如，我们可以设置一个相对合理的 CDN 缓存策略，同时结合使用 CDN 的缓存刷新功能和 HTTP 缓存头信息，确保用户能够及时获取最新的 js 文件，提高用户体验和系统的稳定性。

希望这篇博客能够帮助大家解决类似的问题，让我们的前端开发工作更加顺利，避免因缓存问题而带来的困扰。如果你有任何疑问或其他更好的解决方案，欢迎在评论区留言讨论。

请注意，上述代码使用了 com.sun.net.httpserver 包，它是 Java 标准库的一部分，但在实际生产环境中，可能需要考虑使用更强大和灵活的服务器框架，如 Apache Tomcat 或 Jetty。同时，your-etag-value 需要根据实际情况生成，可以使用文件的哈希值或最后修改时间等信息。这样可以确保当文件更新时，ETag 会相应变化，让浏览器正确地处理缓存。
如果你对上述内容还有任何疑问，欢迎随时向我提出，我会尽力帮助你解决相关的技术问题。