Netlify头文件静态资源缓存控制

Question

是否可能仅针对像图片、字体、CSS和JS等静态资源进行缓存控制？

下面是我的解决方案。

[[headers]]
  for = "/*" # This defines which paths this specific [[headers]] block will cover.
  [headers.values]
    Cache-Control = "public, max-age=604800"

它基本上可以使用，但不如我所预期。即使我更新内容，该网站似乎仍在使用旧版本。

- Yudy Ananda

Answer 1

你现在已经说过，浏览器应该缓存每一个文件，包括index.html，在任何访问了你的网站的人那里都要缓存一周。因此，你会看到网站的旧版本长达一周。

这可能不是你想要的。更好的方法是创建几个头部规则，每个类型一个：

[[headers]]
  for = "*.js" # js files should be set this way
  [headers.values]
    Cache-Control = "public, max-age=604800"
[[headers]]
  for = "*.css" # css files too
  [headers.values]
    Cache-Control = "public, max-age=604800"

然而，你甚至可能不想这样做。Netlify有意将缓存设置为最大寿命为0，但仍允许内容被缓存并启用原子回滚和部署。这里是相关细节：https://www.netlify.com/blog/2017/02/23/better-living-through-caching/

- fool

---

实际上，如果您对资产（例如js、css、图像等）进行指纹识别，就像许多打包程序（例如webpack）所做的那样，您绝对应该将max-age设置为一个大值，甚至使用“Cache-Control：immutable”。 - wereHamster

我不是认为它，我知道它。我在 Netlify 工作，并且写了链接在我的回复中的文章。更具体的原因是，如果您更改文件名但未更改内容，浏览器会不必要地重新下载它。我们的缓存处理对于某些部署中的 main.css 更改并不介意 - 如果有新内容，它将强制进行新的下载，如果没有，则不会。与“新文件名、无缓存存在、每次部署后必须下载”不同。 - fool

@fool 那么只有在文件名更改但内容没有更改的情况下才会出现减速？如果内容发生变化，那么文件名指纹才会更改，对吗？ - Toma Nistor

@TomaNistor 那个文件不是问题——是每个其他文件都由于文件名的更改并且文件名被包含而导致校验和发生变化。此外，虽然你可能认为浏览器能够很聪明地处理这种情况，但实际上，它们不会请求旧文件名，因此它们的缓存查找将无法匹配，它们还会重新下载该文件。 - fool

请注意，Netlify的方法对某些资产并不适用。特别是在使用Web字体时，会出现“未样式化文本的闪烁”，因为浏览器重新验证字体文件需要一些时间。我为.woff2文件添加了标头，这是一种更好的体验。整个方案还假设有一个良好的连接速度比较快的连接，但许多人没有 (尤其是在移动设备上)。Netlify的方法对某些人而言是有意义的，但我认为它不是一个万能灵丹妙药，无法为每个人/每个站点都带来良好的效果。 - Martin Tournoij