SvelteKit如何清除CSS与JavaScript缓存？

开发者阿泽

2026-7-27

解决Svelte项目部署到Vercel后JS/CSS缓存问题

你添加的<meta>缓存控制标签仅对HTML文档本身生效，无法控制浏览器对JS、CSS这类静态资源的缓存行为——这类资源的缓存规则由HTTP响应头或资源文件名的内容哈希决定。

解决方案

1. 确保静态资源自动添加内容哈希

SvelteKit/Vite在构建时默认会给JS、CSS等静态资源文件名添加内容哈希（例如app.abc123.js），内容更新时文件名会自动变化，浏览器会识别到新文件并加载最新版本。如果你的项目没有开启这个功能，检查vite.config.js或svelte.config.js，确保没有禁用该默认行为。

2. 通过Vercel配置自定义缓存响应头

在项目根目录创建vercel.json文件，添加以下配置，直接给静态资源设置缓存规则：

{
  "headers": [
    {
      "source": "/(.*\\.(js|css|png|jpg|jpeg|gif|svg|ico))",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=0, must-revalidate"
        }
      ]
    },
    {
      "source": "/(.*\\.html$|^/$)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "no-cache, no-store, must-revalidate"
        }
      ]
    }
  ]
}

对JS/CSS等资源：max-age=0, must-revalidate 强制浏览器每次请求都向服务器验证资源是否更新，服务器返回304则使用缓存，否则拉取新资源。
对HTML文档：no-cache, no-store, must-revalidate 确保浏览器每次都从服务器获取最新的HTML，避免因HTML缓存导致引用旧资源地址。