前端缓存策略/sass 全局变量

缓存相关头部

link

通过设置响应的 cache-control 控制缓存

cache-control 不区分大小写, 多个属性之间通过逗号分隔, 如 Cache-Control: public, max-age=31536000, immutable

可缓存性

  • public, 表示可以无条件的进行缓存
  • only-if-cached, 表示拿缓存就好了, 不要向服务器发送请求检查是否有新的内容

过期时间

  • max-age=31536000, 表示一年

重新验证以及重新加载

  • must-revalidate 使用前必须检验资源的状态, 过期的资源不可以再使用
  • immutable 指示该资源不会改变, 不要向服务器查询诸如 if-none-match/is-modified-since 之类的信息. 这是一个实验性的属性, 仅 edge/firefox/safari 支持

通过设置响应的 Expires 控制缓存

设置为一个日期/时间, 指示资源在那之后应该被视为过期资源. 如 Expires: Wed, 21 Oct 2015 07:28:00 GMT

如果设置了 Cache-Control 字段的 max-age/s-maxage , 那么 Expire 头部会被忽略

S3 设置头部

通过在 cp/sync 命令中添加 --metadata 参数来添加指定的头部信息, 注意是它只会给本次请求涉及到的数据对象添加头部信息, 在 sync 中, 如果某些文件没有改变, 那将不会对这些应用添加头部信息.

aws s3 ./dist/ s3://mybucket/ --metadata "Cache-Control=public, max-age=31536000, immutable"

或者可以通过 --cache-control 来设置缓存: --cache-control "public, max-age=31536000, immutable

sass 全局变量

link