首先，HTTP的缓存有两种
强制缓存
直接使用浏览器的本地缓存，决定是否使用缓存的主动性在于浏览器这边。 强缓存是利用两个HTTP响应头部字段实现的。
Cache-Control相对时间Expires绝对时间
Cache-Control 的优先级更高一些，先通过 Cache-Control 设置过期时间的大小，再次收到请求之后更新response 的 Cache-Control
协商缓存
浏览器返回304，告诉客户端可以使用本地缓存，协商缓存这两个字段都需要配合强制缓存中 Cache-Control 字段来使用，只有在未能命中强制缓存的时候，才能发起带有协商缓存字段的请求。
基于两种头部
- 基于时间
请求头部中的 If-Modified-Since + 响应头部中的 Last-Modified
- 基于唯一标识
请求头部中的 If-None-Match + 响应头部中的 ETag
ETag 的优先级更高：
- 有时文件不变，最后修改时间可能也会改变。
- 有些文件是在秒级内修改的，使用
ETag可以保证客户端在一秒内刷新多次
为什么要在文件名前面加哈希值呢？
前面讲了浏览器会有缓存，当你更新了代码并重新构建时，如果你的文件名没有变化，那么浏览器就会从缓存中读取旧的文件，会导致代码更新不及时，从而影响网站的正确性和稳定性。Webpack和Vite需要实现热更新，在文件名中加入哈希值，就可以避免浏览器的缓存问题。
