淘宝客网站如何做推广方案seo技术建站
一、说明
产品提出需求：用户有 8 个等级，每个等级对应一个奖牌动画。
按照常用的实现方式：
- 设计提供 8 个 lottie 动画（8 个 json 文件）。
- 研发将 json 文件打包进入 APK 中。
- 根据不同等级播放指定的动画。
每一个 json 文件平均是 800 KB，8 个的话是 6.4 MB。
实现这个功能直接将包体积增加 6.4 MB 的话，增加太多了。
有没有什么办法将体积降低一些呢？
二、优化方案
方案 1：动态下发
可以提前将 json 文件上传到云端，然后通过接口动态下发下载地址，客户端下载下来后再显示动画。
由于我的业务特殊性，需要能够及时显示动画，并且下载失败对业务有较大影响，最终并未采用该方案。
方案 2：图文分离
通常动画文件中既包含动画展示逻辑信息，也包含图片（将图片转为 base64 文本，存储在 json 文件中）。
尝试将图片拿出来放到一个文件夹中后，减少：
- 单个奖牌：800 KB 减少到 600 KB。
- 8 个等级：6.4 MB 减少到 4.8 MB。
方案 3：图片格式转换
之前的图片用的是 png 格式的图片，尝试将其转为 webp 格式后，体积又有相应的减少：
- 单个奖牌：215 KB
- 8 个等级：1.68 MB
方案 4：逻辑共用
通常 8 个奖牌动画对应的是 8 个 json 文件，和 8 套图片。
问题：可否 8 个动画共用一个 json 文件，只替换掉其中的不同的奖牌部分呢？
答案是：可以。
我们将所有的等级图片放到一个文件夹中，根据不同的等级动态替换 json 中的图片配置，这样就实现了只用一个 json 即可，奖牌以外的图片也可以实现共用。
这样调整后当前的动画体积变为了：530 KB
三、总结
图文分离、webp 格式、逻辑共用和动态下发都可以有效降低包体积的占用，大家在开发中可以根据自己的业务场景选择合适的方案进行优化处理。