我应该在 PWA 构建中包含大文件以实现离线功能吗？

Question

我正在使用 Vue 3 CLI 开发一个 PWA，它可以从单独的 CMS/API 中获取 一些 的内容。该应用程序是一个触摸屏游戏，主要用例在没有互联网连接的情况下运行，但用户环境受到控制，并且可以在需要时通过 ServiceWorkers 同步和缓存的最新更新来更新游戏。

当我构建我的应用程序时，Webpack 性能建议会警告资产大于建议的大小限制；在这种情况下，一个介绍视频 (25MB) 和一些字体文件（每个 300kB）。

我是否应该从 CMS/API 提供视频和字体（以及其他大文件），并让我的 Vue 应用程序构建尽可能小，同时牢记离线功能很重要？还是有充分的理由在 Vue JS 构建输出中打包字体和视频？

这是我的第一个 PWA，所以我只是想确认在这种情况下是否遵循 Webpack 指南，因为应用程序在离线时正常运行是优先考虑的问题？

Answer 1

根据您的浏览器，您可以存储一个限制How Much Can You Store

我个人不建议存储如此大的视频文件。如果您的用户离线体验并非绝对需要它。

Answer 2

如果视频不是玩游戏的强制要求，我默认不会缓存它，但如果用户愿意，可以给它机会。

一些玩家可能有低配额数据计划，不想显示视频。

字体看起来像是放入缓存的好资产。