如何使用 angular 4 应用程序从 firebase 存储缓存所有产品图像（大约 1000 张）？

Question

如何使用 angular 4 应用程序从 firebase 存储缓存我的所有网站产品图像（大约 1000 张）。图片在主页上加载非常缓慢。

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

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

Answer 1

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

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

• 如果您使用 Firebase 托管，您可以配置您firebase.json的缓存静态资产，如图像，在 CDN 级别和Cache-Control标头。文档中提供了此功能的示例。

• 此外，您可以使用 Service Worker（可能与workbox一起使用）以及cacheFirst将所有产品图像缓存到用户浏览器中的策略。然后，在第一次缓存后，图像将首先从本地缓存加载。

• 在 Angular 场景中，您还可以使用延迟加载方法从服务器逐步加载图像。基本上，您需要在src属性中使用占位符（如中等模糊效果）并从服务器异步加载图像。然后，例如，Angular 可以使用 Observer 反应性地显示图像。一个处理这个问题的不可知框架库是Blazy。

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