如何将第三方图像放入缓存

Posted 2023-02-22

【中文标题】如何将第三方图像放入缓存

【英文标题】：How do I put in cache a third party image

【发布时间】：2021-09-06 06:12:51

【问题描述】：

我正在运营一个网站，我正在尝试使用 LightHouse 在性能方面获得最高分

我确实将我创建的所有 png/svg/... 放入缓存中 (Cache-Control : public, max-age=31536000)

但是来自第三方网站的所有图片都没有这些

这是我的问题： 如何将这些图片放入缓存？

我是这样称呼他们的（没什么特别的）：

<img
    class="myclass"
    src="https://............."
    
    loading="lazy"
/>

我使用的是 vuejs，所以它在一个组件中

我正在使用 nuxt 和 gcloud

如果您需要更多信息，请告知。

【问题讨论】：

如果您（软）重新加载页面，是否会再次调用您的图像（检查您的浏览器开发工具、网络选项卡）？

是的，软重载确实会再次调用图像

除非您在前面放置缓存，否则您无法控制第 3 方的标头，即反向代理/cdn

@LawrenceCherone 这正是我想做的，我怎么能把其中之一放在适当的位置？

nginx.com/resources/wiki/start/topics/examples/…

【参考方案1】：

当您的网站被托管时，您的浏览器应该自行缓存图像，而无需您真正做任何事情。 在本地，它不起作用，但如果你托管它，你的浏览器会看到同一个图像被调用了两次，它只会从缓存中获取它（HTTP 协议正在处理这个 AFAIK）。

在我的示例中，当我第一次访问该页面时，我调用了sav2.png，它下载了 4.6kB。然后，我软重新加载了页面，它使用了缓存（没有额外调用后端）。

这些图片没什么特别的，只是简单的<img>，资产取自~/assets/images/sav2.png。

---

这是一个朋友的 WIP 网站：https://cyrielle-design.netlify.app/ 这个使用 Cloudinary，但它确实具有相同的模式，即只获取一次图像，然后使用缓存进行后续刷新。