需要关于大量静态资产的 PWA 建议

Question

我正在构建一个包含大约 1100 个 SVG 的教育应用程序。它们非常小，每个 svg 像 800 字节。我对 reactjs 很陌生。

对于每个 SVG，我都有一个音频。

因此

• 1100 svgs

• 1100 个音频片段

我正在使用 create-react-app。

打算使用 howlerJS 来确保音频文件被缓存。

还可以延迟加载 svg。

create-react-app 是否缓存 svg？

我应该改变我的方法吗？也许将 svgs 合并成一个精灵..

我是否应该合并 mp3 并根据需要播放部分音频..

我的主要工作是在用户安装 PWA 时安装音频和 svg。

任何反馈将不胜感激

Answer 1

您的问题没有灵丹妙药，但这里有一些要点需要考虑：

• 您很快就会为用户选择的每一对 svg/音频（按需，而不是总共 1100 个）发出请求并获得响应。

• 不知道您的应用程序的逻辑和用户体验，我可以推断加载 3MB 的 SVG 和 10MB 的音频会比等待 11KB 的按需请求/响应更明显。

• 作为后台作业，在没有来自用户的运行请求的情况下，尝试尽可能多地预先加载文件。

• 缓存已加载的所有内容以避免重复请求

• 首先尝试优化您的源，因为对单个文件的最小更改将导致对 x1000 的规模产生重大影响。一个好的起点是检查 SVG 中的浮点数：尽量避免使用 <path d="M33.6286316,13.9605932... 之类的东西，并在精度允许的范围内保持简单。在大多数情况下，<path d="M33.62,13.96... 可以胜任。