Caching 在网页包中使用CommonChunkPlugin时，我们需要Etag和上次修改的标题吗

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

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

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

---

在响应头中，我还有Etag和上次修改的，每次我为每个文件部署应用程序时，它们都会发生变化。我应该把它们从响应中删除吗？这会不会让浏览器在哈希值仍然不变的情况下仍与服务器联系并查看文件是否已更改？这是一个很好的问题。这在很大程度上取决于后端的实现方式以及它如何计算头值。这些文件是从我们的服务器提供的，还是像s3这样的东西？我们正在使用CDN吗？我们是否在为应用服务器使用框架？谁计算这些头，web服务器还是应用服务器

为了回答这个问题并保持简单，让我们假设我们使用的是流行的服务器框架，没有CDN或第三方托管。与大多数应用程序服务器一样，Express根据所提供文件的内容（而不是文件名）计算

ETag

和

上次修改的

当浏览器第一次请求我们的一个文件时，它将收到资源的

ETag

和

上次修改的

。下次请求同一资源时，浏览器将向服务器发送缓存的

ETag

和

Last Modified

标题。然后，服务器根据这些头决定浏览器是否需要下载资源的新版本，或者缓存的版本是否为当前版本。如果缓存的资源是当前资源，服务器将以

304-未修改

状态代码响应。状态代码是整个缓存系统的关键——它是浏览器决定是否应该使用缓存资源的方式

要生成

ETag

头，Express将响应主体的二进制

缓冲区

表示传递给

ETag

模块，该模块根据缓冲区的内容计算SHA-1哈希（和）。要生成上次修改的

头，Express使用文件系统的上次修改时间（）

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

答复
我认为在这里最好的做法是禁用这些资产的
ETag
和
上次修改的
头，而使用
Expires
或
缓存控制：max age
头设置为遥远的未来日期（通常为1年）。这样，浏览器只有在包过期或缓存中根本不存在包时才会重新下载包。
嗨，罗斯，回答得好，它很有意义。我问这个问题已经有一段时间了，但我离开了ETag，最后修改了它作为回应。原因是，即使Etag和Last Modified已更改，但在哈希未更改时，浏览器仍在使用缓存版本。根据你的回答，它不应该这样做。你认为不同的浏览器有不同的行为：顺便说一句，我的设置就像你说的，Express，没有CDN或第三方托管，Chrome浏览器。@Igor Vuk很有趣。我需要查看所有的请求/响应头才能确定。我猜您还有一些其他的头集，很可能是覆盖Etag验证头的
缓存控制。如果你添加一个例子，我很乐意看一看。现在挖掘这个项目会很复杂，但我的设置是这样的。使用（expressStaticGzip（path.join（uu dirname，'src，'dist'），{maxAge:'1y'}））；app.use（（req，res，next）=>{res.set（'Cache-Control'，'no-Cache'）返回next（）；设置所有静态文件的maxAge和服务器的noCache，以便浏览器始终与服务器联系，并检查是否有更改，但不下载静态文件，除非哈希已更改。是的，现在我想起来了。浏览器确实联系了服务器，因为我是这样设置的：）@Trace我的答案可能已经过时了，因为我早在2017年就用一个旧版本的webpack进行了测试。在我测试时，即使源代码（和chunkhash）没有改变，webpack也会产生不同的二进制代码。（可能webpack在bundle中包含了特定于构建的信息？）这意味着即使chunkhash保持不变，ETag头也可能会发生变化，这使得ETag对于缓存bundle不可靠。我刚刚用一个更新版本的webpack进行了测试，看起来捆绑包的二进制文件在相同的版本之间不再发生变化，因此您可以使用您描述的Etag。@Trace但是我仍然认为长时间过期是一个好主意，以避免在缓存过期后往返服务器检查Etag。