需要给博客的静态资源配置合理的缓存，提升页面访问速度。

这里简单讲下 github page 和 vercel 两种部署方式的缓存如何配置

github page

github page 默认给所有资源(包括 html 文件) 设置了 cache-control: 600 （10min） 如果超过强缓存时间，会走 304 协商缓存

该缓存设置目前不支持调整

能理解 github 设置此策略的含义：面向通用方案，有些仓库的资源是不带 hash 的，需要有更新机制

但是对于带打包的博客这类的页面，我们希望是:

• html 文件的缓存时间较短，10min OK
• 其他资源的缓存时间可以设置久一点，比如 7 day

vercel

目前博客是部署在 vercel 上，默认没有强缓存，都是协商缓存

需要在项目根目录下增加 vercel.json 文件

如果为 monorepo 项目，需要调整 json 位置，可以到控制台调整 Root Directory 取值

配置示例：

{
  "headers": [
    {
      "source": "/service-worker.js",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=0, must-revalidate"
        }
      ]
    },
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, maxage=600, s-maxage=600, stale-while-revalidate=1200"
        }
      ]
    },
    {
      "source": "/(assets|img)/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, maxage=2592000, s-maxage=2592000, stale-while-revalidate=31536000"
        }
      ]
    }
  ]
}

参考文档：

• How to Configure the Cache-Control Response Header in Vercel Projects (opens new window)
• https://vercel.com/docs/concepts/edge-network/caching