在 SvelteKit 中设置静态资产缓存 TTL答案

【问题标题】：Setting static asset cache TTL in SvelteKit在 SvelteKit 中设置静态资产缓存 TTL
【发布时间】：2022-01-26 07:59:36
【问题描述】：

我正在使用the default SvelteKit application template 提供来自/static 的字体和CSS 文件。我正在使用 SvelteKit Node.js 适配器。

/static 文件的默认缓存生存时间 (TTL) 似乎是 4 小时。我不确定这是由 SvelteKit/Vite 本身设置的，还是像 CloudFlare 这样的任何中间盒做出了这个假设。

如何在 SvelteKit 中覆盖它？我认为这需要以某种方式在 Vite 中进行配置，以便 /static 文件是具有正确 HTTP 缓存标头的服务器。由于字体文件不会改变，我想将它们设置为不可变，避免用户网络浏览器再次重新下载文件。

【问题讨论】：

标签： svelte vite sveltekit

【解决方案1】：

对于那些也来这里寻找这个的人，你可以设置 maxage：

<script context="module">
    export async function load({ params, fetch }) {
    //...
        return {
            maxage: 60 // 1 minute
        };
    }
</script>

https://kit.svelte.dev/docs#loading-output-maxage

我不确定这是否适用于预渲染页面，可能不是。

【讨论】：

您的问题不同。这个问题不是为页面设置TTL，而是为静态资产设置TTL。我建议您在新的自我问题上发布自我答案，我可以投票stackoverflow.com/help/self-answer

【解决方案2】：

标头设置在@sveltejs/adapter-node 中硬编码。

但是，最新的@sveltejs/adapter-node@next 版本包含带有cache-control 的缓存不变性标头。

/tmp # wget -S "http://localhost:3000/fonts.css"

--2021-12-31 00:35:00--  http://localhost:3000/fonts.css
Resolving localhost (localhost)... 127.0.0.1
Connecting to localhost (localhost)|127.0.0.1|:3000... connected.
HTTP request sent, awaiting response...
  HTTP/1.1 200 OK
  Vary: Accept-Encoding
  Content-Length: 2249
  Content-Type: text/css
  Last-Modified: Thu, 30 Dec 2021 23:34:41 GMT
  ETag: W/"2249-1640907281407"
  Cache-Control: public,max-age=31536000,immutable
  Date: Thu, 30 Dec 2021 23:35:00 GMT
  Connection: keep-alive
  Keep-Alive: timeout=5
Length: 2249 (2.2K) [text/css]

【讨论】：