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

【问题标题】：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://............."
    alt="my image"
    loading="lazy"
/>

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

我正在使用 nuxt 和 gcloud

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

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：