HTTP缓存

关于顺序和配置项

• 整体顺序： URL => 强缓存 => 协商缓存 => 发新的网络请求。
• 设置了 no-store，内存缓存也不存。两个一样的 img-url，注定会请求 2 次（memory cache都不存）。
• 设置了 no-cache【表示使用协商缓存】，并不是说不存，而是说是否存根据后续对比（即看后续协商缓存有不）。
• public - 存在客户端、代理服务器、CDN。
• private - 只存客户端。
• 协商缓存 - Last-Modifed/If-Modified-Since 并不准确，因为 1s 内，也是可以改变文件数据的。
• 协商缓存 - Etag/If-None-Match 是准确的，因为根据文件内容字节 => hash码，准确判断内容变化。
• etag原理：
  • nginx是用 16进制事件
  • express/koa 用专门的 npm 框架：通常是 文件内容 + 时间

关于实际使用

• html用协商缓存 => 【经常变化的用协商缓存】

  !!!! 如果你一定要用“强缓存”

  • 最好修改对应的名字（不然可能客户一直用着老页面）。
  • 最好设置较小的 max-age，让缓存短一点，越短越不会出现：客户端一直没有更新的情况（要是旧版本有bug就更惨了）

• css/js 经常变化，用 contentHash

• webpack三种随机数
  • hash - 有一个内容变化，全部变化；无内容变化则不变
  • chunkhash（根据入口区分） - 可以通过 vendor 配置，把不常改变的 “第三方库”（比如 Vue、React），打进去，然后用 chunkhash，就可以保证其，强缓存
  • contenthash（根据内容变化区分，有点像etag的原理）- 像我们可以把 css 的变化单独用插件抽出来，就实现了 css变更信息，但是 js 保持之前的缓存。

    module.exports={
    module:{
       rules:[
           {
               test: /\.css$/,
               use:[
                   miniCssExtractPlugin.loader,
                   'css-loader'
               ]
           }
       ]
    },
    plugins:[
       new miniExtractPlugin({
           filename: 'main.[contenthash:7].css'
       })
    }
    }

后端怎么设置

• Express
  • res.setHeader(‘Cache-Control’, ‘public, max-age=0’)
  • res.setHeder(‘ETag, xxxx’)
• Koa

  ctx.set('Cache-Control', 'no-cache');

  all in ctx. ctx.request ctx.response ctx.body