http 缓存

强制缓存

• Expires：就是服务器 response header里带上：

Expires: Wed, 21 Oct 2000 07:28:00 GMT

然后在这个时间前，客户端浏览器都不会再发起请求，而是直接用缓存资源。

• Cache-Control

1. max-age是其中一个属性：

Cache-Control: max-age=20000

这表示当前资源在20000秒内都不用再请求了，直接使用缓存。

2. no-cache：使用缓存前，强制要求把请求提交给服务器进行验证(协商缓存验证)。
3. no-store：不存储有关客户端请求或服务器响应的任何内容，即不使用任何缓存

• 比较：Cache-Control优先级较高，因为Expires是按本地时间来的，而本地时间可能不准。如果在Cache-Control响应头设置了 max-age 或者 s-maxage 指令，那么 Expires 头会被忽略。

协商缓存

• ETag：

1. 当服务器返回时，根据返回内容计算出一个hash值或者一个版本号，具体要看服务器的计算策略，然后加到response header里
   image.png
2. 客户端拿到后会将这个ETag和返回值一起存下来，等下次请求时会使用配套的If-None-Match，将这个放在request header里
   image.png
3. 服务端拿到请求里的If-None-Match和当前的ETag比较，一样的话返回304，告诉浏览器使用本地缓存，不一样的话返回200，使用最新的数据

• Last-Modified & If-Modified-Since
  Last-Modified和If-Modified-Since也是配套使用的，类似于ETag和If-None-Match的关系。只不过ETag放的是一个版本号或者hash值，Last-Modified放的是资源的最后修改时间。Last-Modified是放到response的header里面的。

webpack配置缓存：文件名哈希

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js'
  }

• 这样文件内容改变，重新打包后的文件名的hash就变了

参考：https://segmentfault.com/a/1190000038562294