缓存破坏由Require.js优化的网站

Cache busting a web site optimized by Require.js

本文关键字：优化 网站 js Require 缓存      更新时间：2023-09-26

我有一个web应用程序，它全程使用require.js（除了一些CDN提供的资源）。我正在使用优化工具创建一个"已发布"的网站。

我担心的是，当新版本的网络应用程序发布时，用户将不会获得更新的js文件，因为它们将被浏览器缓存。

除非使用"urlArgs"配置选项，否则在开发应用程序时，问题非常明显。

通常的解决方案是附加一个查询字符串？v=1.0到脚本引用，但由于它们都是通过require.js处理的，因此无法做到这一点。

所以，我的问题是，当发布新版本时，如何确保客户端下载js/css文件的新版本？

如果使用require.js，则必须使用require对象设置"bust"urlArgs-befre。像这样：

<script>
    var require = {
        urlArgs : "bust=" + releaseVersion
    };
</script>

我在CSS和图像方面也遇到过类似的情况。如果您的web应用程序落后于Apache，则可以在mod_headers模块中将缓存控制标头设置为http响应。就我而言，我的web应用程序并没有落后于Apache。我直接击中了玻璃鱼。因此，我最终添加了一个Servlet过滤器，并在将其转发到过滤器链之前，手动将缓存控制头添加到每个CSS和图像响应中。之后，当CSS发生更改时，我只需在HTML中添加一个url参数，如下所示：

<... "main.css?version=release10" />

浏览器看到这个URL更改，并从服务器获取CSS。图像也是如此。对于JS，您必须更新"Bust"值。

相关文章：