使用高效的缓存策略提供静态资源 - Nuxt.js + GAE

Question

我从Lighthouse获得以下内容：

我该如何更改Nuxt.js SSR网站上的缓存TTL？我找到了一些答案，但没有关于Nuxt.js的...

重要提示：部署在Google App Engine中

- lmfresneda

---

这个回答解决了你的问题吗？如何在Nuxt静态文件响应中添加头信息？ - Joe

不行，因为那是关于静态文件夹的，而不是这种情况 :( 不过还是谢谢。 - lmfresneda

Answer 1

你可以按照渲染配置设置自定义缓存策略来提供静态文件夹服务。

例如：

render: {
  // Setting up cache for 'static' directory - a year in milliseconds
  // https://web.dev/uses-long-cache-ttl
  static: {
    maxAge: 60 * 60 * 24 * 365 * 1000,
  },
},

- Jesús Fuentes

---

谢谢您的回答，但是这个问题并没有涉及到静态文件夹。 - lmfresneda

请注意，如果使用GAE的CDN，您可能需要将其更改为static: false;。 - user5589998

Answer 2

在GAE应用程序中，具体的答案是在app.yaml文件中的handlers.expiration参数：

handlers:
  - url: /_nuxt
    static_dir: .nuxt/dist/client
    expiration: 4d 5h
    secure: always

或者，如果您想全局配置它，请在根级别设置 default_expiration 参数：

default_expiration: 4d 5h

允许使用d（天）、h（时）、m（分）和s（秒）。这是文档。

- lmfresneda

Answer 3

除了答案之外，请注意 - 在撰写本文时 - Lighthouse 要求的最短时间为 > 96.5 天（来源：https://github.com/GoogleChrome/lighthouse/issues/11380）。

我按照 @lmfresneda 的答案进行操作，并成功解决了问题，将缓存时间设置为 30 天：在将其更改为 "97d" 之前，我仍然无法通过 Lighthouse 测试。

- Guillaume Prévost

---

谢谢。记住这个好点。 - lmfresneda