缓存控制 #

不缓存 #

实现 #

响应头设置cache-control: no-store。

适用场合 #

适用场合很少，只有在明确知道肯定用不到本地缓存的场合才应该使用“不缓存”。比如：

• 服务器时间接口，因为服务器时间每次请求一定是不一样的，没必要缓存。

• 图形验证码接口，每次都是不一样的内容。

• 秒杀接口，这个“秒杀”是原本意义的几秒内的秒杀，不是现在限时 2 个小时的所谓秒杀。你可能在一秒内发出数次请求，缓存秒杀结果没有任何意义，所以不缓存。

强缓存 #

实现 #

响应头设置cache-control: max-age=31536000，单位是秒，31536000即 1 年。

适用场合 #

对于 Vue 项目来讲，凡是文件名带版本号或者 hash 的文件，一律强缓存，过期时间一般设为 1 年。

协商缓存 #

实现 #

响应头设置：cache-control: no-cache、last-modified: 世界时、etag: hash 值。

字段解释 #

• last-modified: Mon, 14 Mar 2022 06:42:05 GMT：属于响应头。诞生于 HTTP 1.0 规范。服务器告诉浏览器该资源的最后修改时间。

• If-Modified-Since: Mon, 14 Mar 2022 06:42:05 GMT：属于请求头，值等于last-modified的值。浏览器下一次请求会带上If-Modified-Since，向服务器询问这个时间之后该资源是否有更新，如果有更新则返回新资源，并带上新的last-modified，如果没有则返回304状态，响应体缺失，浏览器看到304之后就会从磁盘缓存取资源。

• etag: W/"622ee3bd-850"：属于响应头。etag是 HTTP 1.1 规范新加的字段，是服务器根据特定算法算出的 hash 值，它的出现是由于last-modified无法解决这两种情况：

  1. 如果服务器文件被同样内容的文件覆盖过，此时内容没变但时间变了，服务器会返回同样的内容，造成带宽浪费。

  2. 如果服务器文件的内容 1 秒内变了多次，这时last-modified不变，造成服务器不返回新内容。

  etag可以解决这 2 个问题。事实上单有etag就足以保证资源准确性，可以关掉last-modified。

• If-None-Match: W/"622ee3bd-850"：属于请求头，值对应etag的值，浏览器向服务器发送If-None-Match询问资源的内容是否有变化，有变化则返回新资源，并带上新的last-modified和etag。

适用场合 #

对于 Vue 项目来讲，除了不缓存的和强制缓存的，其他一律使用协商缓存，包括：

• 对于 GET 接口，99% 使用协商缓存，除非是服务器时间接口、图形验证码接口、秒杀接口等。

• 文件名没有版本号或者 hash 的文件一律使用协商缓存，比如 index.html、favicon.ico 等。

针对 Nginx 的总结 #

1. Vue 打包目录下的 /static 内部文件全部设为强缓存。

2. /static外部根目录下的所有文件和下级目录下的所有文件全部设为协商缓存。

3. 默认将所有接口设为协商缓存。

4. 将图形验证码接口、服务器时间接口（如果有的话）、秒杀接口（如果有的话）、每次请求内容都变化的接口（如果有的话）设为不缓存。