配置 HTTP 缓存行为

Jeff Posnick

如需完成此 Codelab，请在第二个标签页中打开 this Glitch。

注意 ：此 Codelab 使用 Chrome 开发者工具。下载 Chrome（如果您尚未安装）。

此 Codelab 介绍了如何更改 基于 Node.js 的 Web 服务器，运行 Express 服务 框架。以及如何确认您希望缓存行为 使用 Chrome 开发者工具中的 Network 面板进行应用。

注意 ：虽然具体说明适用于 Express，但关于选择正确缓存标头的一般原则适用于所有网络服务器环境。

熟悉示例项目

以下是您将在示例项目中使用的关键文件：

• server.js 包含提供 Web 应用 内容。它使用 Express 来处理 HTTP 请求 和响应。具体来说，express.static() 用于提供 本地文件位于公共目录中，因此 serve-static 文档 就会派上用场
• public/index.html 是 Web 应用的 HTML。与大多数 HTML 文件一样， 网址中包含的任何版本控制信息。
• public/app.15261a07.js 和 public/style.391484cf.css 是 Web 应用的 JavaScript 和 CSS 资源每个此类文件的网址中都包含哈希， 与其内容相对应的视频index.html负责 用于跟踪要加载哪个带版本的网址。

。

注意 ：在“实际情况”中，分配哈希值并更新 HTML 文件以包含对最新版本网址的引用的过程由构建工具（例如 webpack）处理。在此 Codelab 中，我们假设哈希是在已完成的构建流程中生成的。

配置 HTML 的缓存标头

在回应针对不包含版本控制信息的网址的请求时， 请务必在回复邮件中添加 Cache-Control: no-cache。以及 建议您从另外两个响应标头中选择一个： Last-Modified 或 ETag。通过 index.html属于此类别。可以分为两个步骤。

首先，Last-Modified 和 ETag 头文件由 etag 和 lastModified 配置选项对于true HTTP 响应，因此在当前设置中，您不必选择接收此类响应 行为不过，您可以在配置中明确指定。

其次，您需要能够添加 Cache-Control: no-cache 标头， 您的 HTML 文档（在本例中为 index.html）。最简单的方法就是 有条件地设置此标头 setHeaders function, 然后，检查传入请求是否针对的是 HTML 文档。

• 点击 Remix to Edit 以使项目可修改。

server.js 中的静态传送配置最初如下所示：

app.use(express.static('public'));

• 进行上述更改之后，您最终应获得 如下所示：

app.use(express.static('public', {
  etag: true, // Just being explicit about the default.
  lastModified: true,  // Just being explicit about the default.
  setHeaders: (res, path) => {
    if (path.endsWith('.html')) {
      // All of the project's HTML files end in .html
      res.setHeader('Cache-Control', 'no-cache');
    }
  },
}));

为采用版本控制的网址配置缓存标头

在对包含以下内容的网址的请求做出回应时： “fingerprint”或 并且其内容绝不会更改，请将 Cache-Control: max-age=31536000。app.15261a07.js 和 “style.391484cf.css”属于此类别。

在 setHeaders function 您可以添加其他逻辑来检查给定的 请求针对的是版本化网址，如果是，请添加 Cache-Control: max-age=31536000 标头。

要做到这一点，最可靠的方法是使用 正则表达式 所申请的资产是否与 哈希。在本示例中，该值始终为 8 由 0 到 9 这组数字中的字符和小写字母 a 到 f（例如 十六进制字符）。哈希值 两侧始终以 . 字符分隔。

一个正则表达式 符合这些通用规则 可以表示为 new RegExp('\\.[0-9a-f]{8}\\.')。

注意 ：在提出这些规则时，越具体越好，以免日后出现问题。如果您最终向项目添加了其他无版本控制的 JavaScript 或 CSS 资源，那么较为宽泛的匹配（例如检查 .js 或 .css 文件扩展名）最终可能会成为一个问题。

• 将 setHeaders 函数修改为如下所示：

app.use(express.static('public', {
  etag: true, // Just being explicit about the default.
  lastModified: true,  // Just being explicit about the default.
  setHeaders: (res, path) => {
    const hashRegExp = new RegExp('\\.[0-9a-f]{8}\\.');

    if (path.endsWith('.html')) {
      // All of the project's HTML files end in .html
      res.setHeader('Cache-Control', 'no-cache');
    } else if (hashRegExp.test(path)) {
      // If the RegExp matched, then we have a versioned URL.
      res.setHeader('Cache-Control', 'max-age=31536000');
    }
  },
}));

使用开发者工具确认新行为

注意： 您可以通过学习此 Codelab 来熟悉 Chrome 开发者工具中的“Network”面板。

在对静态文件服务器完成修改后，您可以检查 在打开开发者工具 Network 面板的情况下预览实时应用，确保已设置正确的标头。

• 如需预览网站，请按查看应用。然后按 全屏 。

• 自定义 显示在“网络”面板中，以添加最相关的信息。 列标题：

在这里，需要注意的列是 Name、Status、Cache-Control ETag 和 Last-Modified。

• 在开发者工具中打开 Network 面板的情况下，刷新页面。

页面加载后，您应该会在“Network”面板中看到 如下所示：

第一行显示的是您导航到的 HTML 文档。正确 通过 Cache-Control: no-cache 提供。该请求的 HTTP 响应状态 是 304。这个 意味着浏览器就不用立即使用缓存的 HTML， 使用 Last-Modified 和 ETag 向网络服务器发出了 HTTP 请求 查看其中是否包含对 HTML 的任何更新 缓存HTTP 304 响应表示没有更新的 HTML。

注意 ：Cache-Control: no-cache 并不意味着“从未使用缓存副本”。它的意思是“始终先通过服务器检查，在收到 HTTP 304 响应时使用缓存副本”。

下面两行是针对带版本号的 JavaScript 和 CSS 资源。您应该 您会看到它们通过 Cache-Control: max-age=31536000 投放，以及 每个均为 200。 由于所使用的配置，并不会向 Node.js 服务器，点击此条目将显示更多详细信息 包括响应内容为“（来自磁盘缓存）”。

ETag 列和 Last-Modified 列的实际值并不重要。通过 请务必确认它们已设置完毕

总结

完成此 Codelab 中的步骤后，您现在已经熟悉如何 使用 Express 在基于 Node.js 的网络服务器中配置 HTTP 响应标头， 以便充分利用 HTTP 缓存。此外，您还会看到需要确认的步骤 正在使用预期的缓存行为。 Chrome 的开发者工具。