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

Question

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

https://nikudu.com/

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

Answer 1

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

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

如果你有兴趣，我写了一篇关于Service Worker 和独立于 Angular 的缓存策略的文章，因此你也可以在你的应用程序中使用相同的概念。