caching - 在 webpack 中使用 CommonsChunkPlugin 时需要 Etag 和 Last-Modified header

Question

我正在使用 webpack 来捆绑我的所有资源文件，所以我得到了这样的东西。

bundle.7fb44c37b0db67437e35.js
vendor.495e9142a1f8334dcc8c.js
styles.bc5b7548c97362b683f5582818914909.css

我在名称中使用 chunkhash，因此当浏览器缓存某些内容时，它不会再次缓存，直到哈希值发生更改。例如，如果我更改样式中的某些内容，捆绑文件并部署，则只有样式的哈希值会更改，其他的不会更改，因此浏览器将再次从服务器请求样式文件，其余部分将从内存缓存中使用。

在响应 header 中，我还有 Etag 和 Last-Modified，每次我为每个文件部署应用程序时它们都会更改。我应该从回复中删除它们吗？即使哈希值仍然相同，这是否会迷惑浏览器联系服务器并查看文件是否已更改？

Answer 1

很好的问题。这很大程度上取决于后端如何实现以及如何计算 header 值。文件是由我们的服务器提供的，还是其他服务器(例如 s3)提供的？我们使用 CDN 吗？我们是否为应用程序服务器使用框架？谁计算这些 header ，Web 服务器还是应用程序服务器？

出于本答案的目的并为了简单起见，我们假设我们正在使用流行的服务器框架 Express没有 CDN 或第 3 方托管。与大多数应用程序服务器一样，Express 根据所提供的文件的内容(而不是文件名称)来计算 ETag 和 Last-Modified。

浏览器第一次请求我们的文件时，它将收到资源的 ETag 和 Last-Modified。下次请求相同的资源时，浏览器会将缓存的 ETag 和 Last-Modified header 发送到服务器。然后，服务器根据这些 header 决定浏览器是否需要下载资源的新版本，或者缓存的版本是否是最新版本。如果缓存的资源是最新的，服务器将使用 304 - Not Modified 状态代码进行响应。状态代码是整个缓存系统的关键 - 它是浏览器决定是否应该使用缓存资源的方式。

为了生成 ETag header ，Express 将响应正文的二进制 Buffer 表示形式传递给 etag 模块，该模块计算 SHA-1基于缓冲区内容的哈希( source: generating ETag header 和 source: generating hash )。为了生成 Last-Modified header ，Express 使用文件系统的上次修改时间 ( see lastModified in docs )。

当 webpack 构建一个新的包时，即使 chunkhash 相同，文件的二进制文件也会改变。这会导致 Express 输出不同的 Etag 和 Last-Modified，这意味着它下次不会响应 304请求资源。如果没有 304 状态代码，浏览器将不必要地重新下载 bundle 。

回答

我认为这里最好的做法是禁用这些 Assets 的 ETag 和 Last-Modified header ，而是使用 Expires 或 Cache-Control: max-age header 设置为遥远的 future 日期(通常为 1 年)。这样，浏览器只会在过期或缓存中不存在的情况下重新下载 bundle 。