React Native中Lottie动画JSON文件减容方案及压缩库选型咨询

优先推荐你选择压缩后本地存储的方案，收益性价比最高，只有在动画需要高频更新、非核心路径使用的场景下再考虑云端存储方案。

两种方案的对比 #

云端存储方案 #

• 适用场景：动画更新频率高、用户不会每次打开App都用到全部动画、允许离线状态下不可用
• 优势：完全不占用App安装包体积，可随时更新动画内容不需要发版，首次加载后可缓存到本地实现二次快速加载
• 劣势：首次加载对应动画时存在网络延迟，无网络状态下未缓存的动画无法使用

本地压缩存储方案 #

• 适用场景：动画属于App核心路径必备资源、对加载速度要求高、需要支持离线使用
• 优势：加载速度无延迟，无网络依赖，JSON经过gzip等算法压缩后体积可降到原有的1/3_{1/4，原本2}3MB的总文件压缩后仅占500KB~800KB，对安装包体积影响极小
• 劣势：动画内容更新需要跟随App发版

打包预压缩工具 #

你可以在App打包前先对原始Lottie JSON做批量压缩，不需要修改原始动画内容：

• gzip：通用高压缩率工具，压缩后生成.gz格式文件，React Native侧有成熟的解压适配方案
• lz-string：专门针对字符串优化的轻量压缩算法，压缩结果可直接存为字符串，不需要处理二进制文件，适配成本更低
• 补充优化：可以先使用lottie-minify工具清理JSON中的冗余图层、无用控制点，精简原始文件后再做压缩，可进一步降低10%~20%的体积

React Native运行时解压库 #

react-native-gzip #

适配gzip格式压缩文件，性能优秀，解压100KB级别的文件几乎无感知，示例用法：

import { decompress } from 'react-native-gzip';
// 读取本地gz文件转为base64格式后传入解压
const rawJsonStr = await decompress(base64GzData, 'base64');
const lottieJson = JSON.parse(rawJsonStr);

lz-string #

同时支持Web和React Native环境，不需要额外原生依赖，适配更简单，示例用法：

import LZString from 'lz-string';
// 传入预压缩好的字符串直接解压
const rawJsonStr = LZString.decompress(compressedString);
const lottieJson = JSON.parse(rawJsonStr);

内容的提问来源于stack exchange，提问作者Einzig7