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

Question

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

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

我尝试在线搜索，但没有使用角度为4/5的大量信息。有人可以帮帮我吗？

Answer 1

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

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

中提供了一个示例

• 如果您使用的是Firebase托管，则可以将firebase.json配置为使用Cache-Control标头缓存CDN级别的静态资产（如图像）。 documentation.

中提供了此功能的示例

• 此外，您可以使用服务工作人员（可能使用workbox）和cacheFirst策略将所有产品图片缓存到用户浏览器中。然后，在第一次缓存之后，将首先从本地缓存加载图像。

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

通过这些方法，您的应用可以更快地加载图片。