如何在不添加get参数的情况下对JavaScript文件进行缓存?



我有一个JavaScript文件main.js这是嵌入在第三方网站,我没有控制。这是一个小部件,第三方使用它来连接到我的网站并显示数据。

当我更新main.js时,我需要以某种方式破坏缓存。但是,我不能使用添加版本号的经典方法,因为我无法访问嵌入。它们都只是将main.js作为脚本标签。

我怎么能不使用get参数(即:main.js?ver=12355)的脚本缓存?

你不能主动"破坏"一个缓存"从服务器端。您需要配置缓存行为,以便客户端以适当的间隔检查更新版本。您需要在保持最新和不因持续请求而导致服务器死亡之间找到适当的平衡(这始终是所有缓存的折衷)。

如果您完全禁用缓存,库将始终是最新的,但客户端将会变慢,因为它必须一遍又一遍地下载文件,您可能会给服务器带来很大的压力。

另一种极端是让客户端无限缓存,但这样可能会过期很长一段时间。

因此,您希望找到适当的平衡,允许客户端在一段时间缓存文件,并允许它在一段时间过期,但不要太长。当客户端再次请求服务器时,您将希望能够以"没有任何更改"来响应。响应,这样客户端就可以保留它已经拥有的文件,而不必再次下载。

对于所有这些,您的服务器需要设置正确的HTTP头:

  • Cache-Control: public/private指示公共代理(例如cdn)是否可以缓存文件或仅缓存客户端本身
  • Cache-Control: max-age=...控制客户端缓存文件的时间
  • Expires: ...作为上述的替代方案,在文件过期
  • 时设置绝对时间
  • ETag: ...通过其内容来识别文件(例如文件的哈希值),因此客户端可以包含If-None-Match请求头以允许服务器响应304 Not Modified状态
  • Last-Modified: ...作为上述的替代,允许客户端包含If-Modified-Since请求头

MDN有一篇很棒的文章:https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching

最新更新