angular - 如何使用 Angular 4 应用程序缓存 Firebase 存储中的所有产品图像(大约 1000 个)？

Question

如何使用 Angular 4 应用程序从 Firebase 存储中缓存我的所有网站产品图像(大约 1000 个)。主页上的图像加载速度非常慢。

有没有办法可以在应用程序启动时缓存所有图像或在第一次缓存它们时加载并从那里使用？

我尝试在网上搜索，但没有太多关于 Angular 4/5 的信息。有人可以帮我吗？

Answer 1

有几种可能性。以下是一些建议:

• 将文件上传到 Firebase 存储时，您可以提供元数据属性，例如 cacheControl。此属性将用于根据您的规范缓存文件。 Firebase documentation. 中提供了一个示例。

• 如果您使用 Firebase 托管，则可以使用 Cache-Control 将 firebase.json 配置为在 CDN 级别缓存静态资源(例如图像) header 。 documentation. 中提供了此功能的示例。

• 此外，您可以使用服务 worker ，也许使用 workbox ，使用 cacheFirst 策略将所有产品图像缓存到用户浏览器中。然后，在第一次缓存后，图像将首先从本地缓存加载。

• 在 Angular 场景中，您还可以使用延迟加载方法从服务器渐进式加载图像。基本上，您需要在 src 属性中使用占位符(如中模糊效果)并从服务器异步加载图像。然后，Angular 可以使用观察者等来 react 性地显示图像。处理此问题的不可知框架库是 Blazy .

通过这些方法，您的应用程序将更快地加载图像。