预存超过 1000 个资产损害性能

Question

我正在使用 Vue CLI PWA 工作箱插件模式。 我的应用程序有 1000 多个资产，预缓存它们会导致非常糟糕的性能。请检查一下：

https://nikudu.com/

有没有办法更具体地预缓存文件？ 例如，通过 URL 预缓存文件。 在 url x/y 上仅预缓存文件 1、5、6，在 url x/v 上预缓存文件 7、8、2。

Answer 1

我曾使用过 PWA 和 Angular，因此没有使用 Vue 的经验。也就是说，我建议仅预缓存您的 shell app（因此，在离线访问应用程序时，您希望向用户呈现的最小静态资产/js）。

对于其他图像，您可以使用惰性方法并仅在请求一次后才缓存图像（但我不知道这是否违反您的要求）。
从这一点开始，您甚至可以扩展您的逻辑来定义哪些是最常用的路线，并在用户登陆应用后仅在后台预加载这些图像。

如果你有兴趣，我写了一篇关于Service Workers and caching strategies 的文章，独立于 Angular，因此你也可以在你的应用程序中使用相同的概念。