我正在构建一个教育应用，其中包含约1100个SVG。每个svg很小，例如800bytes。我对Reactjs很陌生。
对于每个SVG，我都有一个音频。
因此
1100 svgs
1100个音频剪辑
我正在使用create-react-app。
打算使用howlerJS来确保音频文件被缓存。
也懒加载svg。
create-react-app是否缓存svg？
我应该改变方式吗？也许将svgs合并为一个精灵。
我应该合并mp3并根据需要播放部分音频。
我主要是要在用户安装PWA时安装音频和svg。
任何反馈将不胜感激
答案 0 :(得分：0)
解决您的问题没有万灵丹，但以下是需要考虑的一些关键点：
您很快就可以对用户选择的每对svg /音频进行请求并获得响应（按需，而不是总共1100）。
不知道您应用的逻辑和用户体验，我可以推断出，加载3MB SVG和10MB音频比等待11KB的请求/响应更引人注目。
作为后台作业，请尝试尽可能多地将文件加载到前端，同时没有用户的运行请求。
缓存已加载的所有内容，以避免重复请求
首先要尝试优化源代码，因为对单个文件的最小更改将对x1000的规模产生重大影响。一个很好的起点是检查SVG中的浮点：尝试避免使用类似<path d="M33.6286316,13.9605932...的东西，并使其尽可能地精确。在大多数情况下，<path d="M33.62,13.96...可以胜任。