WordPress 在保留查询字符串的同时启用 css/js 文件的浏览器缓存

Posted 2023-03-06

【中文标题】WordPress 在保留查询字符串的同时启用 css/js 文件的浏览器缓存

【英文标题】：WordPress enable browser cache of css/js files while preserving query string

【发布时间】：2018-03-31 20:14:39

【问题描述】：

希望在浏览器中尽可能多地缓存 WordPress 中的 css/js 文件（以加快加载速度）。但是，如果显然有查询字符串，（至少 Chrome）将不会缓存。但是将版本放在查询字符串中非常有用，除了 WordPress 代码和其他模块（例如 tinymce）中我无法控制的 css 文件（它们都使用版本查询字符串）。有没有办法缓存静态文件？

【参考方案1】：

您的文件可能会在源和用户之间缓存很多地方。浏览器只是其中之一。

避免查询字符串参数的建议是基于许多流行的缓存服务器在存在查询字符串时不缓存。我们谈论的是位于 Web 服务器前面的服务器。 （有些，比如 Cloudflare，让您可以选择处理查询字符串的方式）。

总的来说，如果您发送适当的标头，浏览器仍然会缓存具有查询字符串的资源。

获得两全其美的常用方法是实际名称的版本：

script-3.4.2.js

这使您无需查询字符串即可进行版本控制，并使您对缓存技术不可知。

Chrome 会缓存

如果您是 WordPress 用户，您可能会从以下位置加载脚本：

https://www.example.com/wp-includes/js/wp-embed.min.js?ver=4.8.2

与所有脚本一样，您必须在第一次加载时获取它。但它应该有某种形式的缓存控制头。

cache-control:public, max-age=172800
content-encoding:gzip
content-type:text/javascript
date:Thu, 19 Oct 2017 18:26:18 GMT
etag:W/"576-543356dcbb9ba"
expires:Sat, 21 Oct 2017 18:26:18 GMT
last-modified:Fri, 09 Dec 2016 08:20:37 GMT
status:200
vary:Accept-Encoding

当您导航到另一个引用该脚本的页面时（即，由于浏览器的行为不同，您无法通过直接加载文件来测试它）...它从缓存中加载它：

如果您发现它没有缓存，请仔细检查与文件一起发送的标头，因为它们比查询字符串更有可能是一个问题。

【讨论】：

谢谢。由于某些文件不在我的控制范围内，因此更改文件名不是我的选择。即使存在查询字符串，有没有办法让浏览器（至少 Chrome）缓存？没有使用任何托管服务，没有 CDN，所以不太担心中间的服务器。

启动您的网络标签并浏览几页。我敢打赌你会看到这些文件是从 Chrome 缓存中加载的。

是的，但不是带有查询字符串的那些。对于那些没有我确实看到“来自磁盘缓存”

已编辑标题的问题.. 我确实使用除 Etag 之外的所有缓存控制标题，但仍从网络加载..