强缓存和协商缓存

区别：使用本地缓存时，是否需要向服务器验证本地缓存的有效性。

强缓存

主要通过 http 请求头中的 Cache-Control 和 Expire 两个字段控制

Cache-Control = “public, max-age=xxx” 表示 xxx 秒内再次访问该资源，均使用本地缓存

问题：更新不及时，数据不一致

协商缓存

每次都要请求验证，缓存的意义何在？

合理使用缓存方案：

  • HTML：使用协商缓存。
  • CSS&JS&图片：使用强缓存，文件命名带上hash值。

webpack hash

hash、chunkhash、contenthash

  • hash：跟整个项目的构建相关，构建生成的文件hash值都是一样的，只要项目里有文件更改，整个项目构建的hash值都会更改。
  • chunkhash：根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的hash值。
  • contenthash：由文件内容产生的hash值，内容不同产生的contenthash值也不一样。

ETag 计算

Nginx：文件最后修改时间16进制-文件长度16进制

Express：使用 serve-static 中间件配置缓存方案

  1. 文件大小和修改时间
  2. 文件内容的 hash 值和内容长度