前端项目中，强缓存和协商缓存的配置

前端缓存分为HTTP缓存和浏览器缓存

1. HTTP缓存(本文重点)
   • 强缓存
   • 协商缓存
2. 浏览器缓存
   • 比较熟悉的 cookie，localstorage sessionstorage indexDB…
   • 或者cacheStorage 请求的缓存，如果本地有取本地的

这里主要笔记http缓存

先说总结的内容
webpack配置（主要是文件名上有个hash值，便于服务器校验文件有没有修改）
使用hash的好处就是，使版本发布之后，使之前文件的强缓存失效

module.exports = {
  output: {
    filename: 'bundle.[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
  },
};

1
2
3
4
5
6
7

nginx配置 （主要是配置html文件不强缓存，别的文件使用强缓存+协商缓存）

location / {
    root   www; # 访问根目录
    index  index.html index.htm; # 入口文件
}

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
    # 启用强缓存的静态资源， 强缓存过期之后使用协商缓存
    expires 7d; # 设置缓存时间为7天
     if_modified_since before;
    add_header Cache-Control "max-age=604800, public"; # 设置强缓存
}

location ~* \.html$ {
    # 不启用强缓存的 HTML 文件
    expires off;
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

• if_modified_since before 启用了 If-Modified-Since 验证，允许浏览器发送 If-Modified-Since 头部来验证资源是否已更改。
• add_header Cache-Control 用于设置强缓存的 Cache-Control 头部，以便在资源的强缓存过期后，浏览器可以使用 If-Modified-Since 验证。
  这样配置允许浏览器在资源的强缓存过期后，发送 If-Modified-Since 头部的请求来验证资源是否需要更新。如果资源未更改，Nginx将返回状态码 304 (Not Modified)，并且浏览器将使用本地缓存的资源。

总之，虽然强缓存是首选的缓存策略，但协商缓存仍然可以提供额外的性能优势，并减少不必要的网络请求，对于代理前端静态资源的Nginx配置仍然有用。

强缓存 （Cache-Control 和 Expires）

就是设置时间，时间不到就强制一直取本地的,设置了之后就不用跟服务器协商了

Expires 和 Chache-control 都是标识时间的字段，需要注意的是如果二者同时出现，Chache-control 的优先级是高于 Expires 。

但 Expires 是 HTTP1.0 的规范，时间格式是 GTM 字符串，如如果服务器时间和客户端时间差别较大时，会导致内存混乱。而服务器的时间和用户实际时间不正常是很正常的现象，所以在使用 Expires 的时候会出现一些问题，建议还是使用 Chache-control 来标识时间

Cache-Control 这个字段是 http 1.1 的规范，一般常用该字段的 max-age 值来进行判断，它是一个相对时间所以比较准确

配置方法

• webpack 使用 asset-modules 的 output 配置中的 cache 字段来控制生成文件的缓存策略

module.exports = {
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
    assetModuleFilename: '[name][contenthash][ext]',
  },
};
1
2
3
4
5
6
7
8

这个配置使用了 [contenthash] 来生成文件名，这意味着如果文件内容没有改变，contenthash 也不会改变，从而利用浏览器的强缓存

• Nginx 中设置强缓存

location /static/ {
    alias /path/to/static/files;
    expires 30d;  # 设置缓存时间为30天
}
1
2
3
4

• NodeJs 中

const express = require('express');
const app = express();

app.use('/static', express.static('public', {
  maxAge: '30d',  // 设置缓存时间为30天
}));
1
2
3
4
5
6

协商缓存 （Last-Modified 和 ETag）

发请求到服务器，由服务器判断标签的值是不是最新的，是最新的就不返回内容，否则就返回内容
协商缓存是由服务器来决定，这个资源到底是否更新。整个过程也是涉及到两个字段。在第一次请求的 header 中会出现 Last-Modified 或是 Etag，注意是第一次请求的时候就会有，因为要通过这个字段来判断资源是否可用。

如果是 Etag 对应的是 if-None-Match 字段，是一段唯一标识符，告诉服务器本地缓存文件的最后修改时间。

如果是 Last-Modified 对应的是 if-Modified-Since 字段，是一段时间格式的字符串，比如是哈希值，服务端判断哈希是否一致。HTTP中并没有指定如何生成 ETag，这个由开发者自行决定。

以上两种，如果服务端判断一样，则返回 304 Not Modified，如果不一致则返回新的资源，并且更新本地缓存

配置方法

• webpack 使用 output 配置的 filename 中添加 [contenthash] 来生成资源文件名，并生成 ETag 头部，从而启用协商缓存。

module.exports = {
  output: {
    filename: 'bundle.[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
  },
};

1
2
3
4
5
6
7

• Nginx 中设置强缓存

location /static/ {
    alias /path/to/static/files;
    if_modified_since exact;
    add_header ETag "your_etag_value";
}

1
2
3
4
5
6

1. if_modified_since exact; 指示 Nginx 使用精确的 If-Modified-Since 验证，这意味着如果 Last-Modified 与请求头中的 If-Modified-Since 匹配，Nginx将返回状态码304。
2. add_header ETag “your_etag_value”; 添加 ETag 头部到响应中，浏览器将与请求头中的 If-None-Match 进行比较。

• NodeJs 中

const express = require('express');
const app = express();

app.use('/static', express.static('public', {
  etag: 'your_etag_value',
  lastModified: true,
}));

1
2
3
4
5
6
7
8