是否可以使用 Workbox 缓存策略在页面请求图像之前预加载图像?



我想在Create React App项目中使用Workbox。我正在为不会向最终用户显示加载性能的方案构建一个应用程序,但非常重要的是,应用程序流中发生的所有事情都不会显示任何加载或部分图像。

我一直在尝试了解创建 React 应用程序中的预缓存工作流程。当我构建项目时,我得到了一个预缓存清单文件,但加载该页面并没有像人们所期望的那样开始急切地加载资产,名称为"precaching"。我想这是有道理的。您不希望在普通网站或应用程序中预加载每个图像。

但是有没有办法强制这种不太常见的行为,而不必手动请求每个图像?

谢谢!

是的,这是完全可能的,而且并非闻所未闻。实际上,许多网站决定使用预缓存来预缓存各种资产,以便在浏览器要求它们时超级快速地使用它们,或者在浏览器离线时完全可用。在其他一些情况下,在请求发生时缓存内容可能是有益的,但这不是任何类型的"默认情况"或其他什么。

您可以在此处阅读有关 Workbox 预缓存策略的更多信息:https://developers.google.com/web/tools/workbox/modules/workbox-precaching

我不熟悉Creact-React-App对Workbox的实现/使用,所以你最好从他们的部分检查相应的文档。但我强烈建议您也阅读整个Workbox文档,因为在此之后,CRA文档在概念上将更容易理解。

最新更新