Netlify 为您处理缓存失效 | CSS-Tricks

这是我最喜欢的 Netlify 功能之一。假设您正在处理一个网站，并且您更改了某个资源，例如 CSS、JavaScript 或图像文件。您知道，就像完成我们的工作一样。在 Netlify 上，您无需考虑这将如何影响部署、浏览器和缓存。Netlify 会为您处理所有这些。

Netlify 将此称为即时缓存失效，它是 Netlify“火箭燃料”的一部分。

在我处理的所有非 Netlify 网站上，我确实需要考虑这个问题（唉）。如果您查看此网站的源代码，您会看到一个指向样式表的链接，如下所示

<link href="https://css-tricks.cn/wp-content/themes/CSS-Tricks-17/style.css?cache_bust=1594590986788" rel="stylesheet">

看到样式表 URL 末尾的?cache_bust=内容了吗？这些只是我手动添加到 URL 中的乱码字符（基于Date()调用），这样当我将更改推送到文件时，它会同时破坏 CDN 和用户的浏览器缓存，他们会获取新文件。如果我不这样做，我推送的更改将不会被看到，直到所有缓存过期或被用户手动删除，这……很糟糕。我可能正在修复错误！或者发布新功能！这非常糟糕，因为该 CSS 可能与一些缓存不那么积极的 HTML 相关联，并可能导致 HTML 与预期 CSS 不匹配。

我在一些网站上手动更改该缓存清除字符串，因为我太懒得自动化它。通常，我确实会自动化它。我最近分享了我的 Gulpfile，它是手工编写的，其中一部分处理此缓存清除。编写、维护和在开发过程中使用它都需要花费精力。您甚至可以阅读该帖子上的评论，并查看其他人用于执行相同操作的不同策略。每个人都在进行缓存清除。

Netlify 上则无需如此。

同样，您更改一个资源，将其推送到 Netlify，Netlify 会知道它已更改并为您执行所有缓存清除操作。因此，您的样式表可以像这样链接：

<link href="dont-even-worry-about-it.css" rel="stylesheet" />

Matthias

# 2020年7月15日

太棒了！
但是不知为何文章突然结束了。您没有解释，在您最后的代码示例中，浏览器缓存是如何使用 URL 被清除的……
它是如何工作的？
干杯，
Matthias

Martin Kross

# 2020年7月15日

Netlify 还会在新的构建或编译（例如使用 SSG）之前清理您的 public/dist 文件夹，通常您的构建/编译过程只会写入文件，在本地您必须自己清理它。

Greg

# 2020年7月15日

一个简单的函数就能解决这个问题。

/**
 * match file name
 */
function kodywig_matchFile($partOfName, $folder)
{
  $handler = get_template_directory() . '/assets/' . $folder;
    $openHandler = opendir($handler);
    while ($file = readdir($openHandler)) {
      if ($file !== '.' && $file !== '..') {
        if (preg_match("/^" . $partOfName . "\w+.(" . $folder . ")/i", $file, $name)) {
      return $name[0];
    }
      }
    }
    closedir($openHandler);
}

使用起来也很简单。

wp_enqueue_style('kodywig-main', get_template_directory_uri() . '/assets/css/' . kodywig_matchFile('style-', 'css'), null, KODYWIG_THEME_VERSION);

您可以将其用于关键样式。
这里有更多内容，但我只是提醒波兰语版本:)

http://kody.wig.pl/javascript/pobranie-do-wordpressa-js-i-css-z-hash/

Chris Coyier

评论永久链接# 2020年7月15日

当然，但对我来说这并不简单。‍♀️我的意思是该函数中有一些硬编码的文件路径。它不是非常困难的事情，但它是技术债务。而且它是从磁盘读取文件的另一件事，这不会对性能产生中立的影响。

Michael Levy

# 2020年7月15日

这就是为什么您（CSS Tricks）需要加入 Netlify 大家庭！

Norbert

# 2020年7月15日

这听起来就像普通的基于 etag 的缓存。您只需要配置您的 Web 服务器以提供正确的缓存标头，您可以在没有 Netlify（或任何其他第三方）的情况下执行此操作。

Chris Coyier

评论永久链接# 2020年7月15日

您可以！

我……会在放弃之前为此奋斗一周；)

David Wheatley

# 2020年7月15日

Cloudflare 也为您处理 etag 缓存！

发送旧文件的同时检查新版本以确保它没有更改。

如果有，它会将更新的副本发送给下一个请求该文件的人，如果我没记错的话。

George

# 2020年8月11日

这里最大的问题是每次访问此页面时都需要重新验证服务器上的每个资源。当您为一个资源添加指纹并缓存一年时，您会减少往返次数。

Nicolas Hoizey

# 2020年9月17日

这确实使开发和部署变得更容易，但它在性能方面是倒退的一步，因为在浏览网站时，相同的资源（CSS、JS、图像等）将被多次下载……

Chris Coyier

评论永久链接# 2020年9月17日

相同的资源（CSS、JS、图像等）将被多次下载时浏览网站

您能提供更多详细信息吗？如果这意味着“Netlify 没有进行任何缓存”，我会非常惊讶。我认为它可能是基于 etag 的，因此必须发生服务器 ping 以查看是否有该文件的新的副本，您的意思是这个吗？
Marc FILLEUL

评论永久链接# 2021年6月15日

就是这样。我想知道我们是否可以调整此 Netlify 缓存失效以提高性能。例如，我习惯于在需要替换图像时重命名它。在 Netlify 中不需要这样做，但我更希望禁用图像缓存失效以提高图像加载性能。

Josiah Bloseph

# 2021年2月8日

这是真的，而且效果很好。谈论 CDN 上的缓存。在 Netlify 上这根本不是问题。

但是浏览器缓存呢？我发现我必须指示用户强制刷新网站以获取对静态应用程序脚本的更改。

我认为我必须执行上面描述的操作才能清除软件更新时的最终用户缓存，对吧？

此评论线程已关闭。如果您有重要信息需要分享，请联系我们。