使用JSON.parse解析34MB文件耗时45秒，如何优化？

我们正在开发一款包含约4000个食谱的App，为节省空间，下载时仅保存单语言版本。用户切换语言设置时，App会下载对应语言的食谱文件（约34MB），但每次进入食谱板块需耗时45秒。经排查，耗时根源为JSON.parse。同体积的内置食谱文件访问流畅，请问如何优化解析速度？

下载文件读取解析代码 #

const readDownloadedJson = async () => {
    await ReactNativeBlobUtil.fs
      .readFile(recipesPath, "utf8")
      .then((res) => {
        const parsedJson = JSON.parse(res);
        console.log(parsedJson.length);
      })
      .catch((err) => {
        console.log("status: ", err.status);
        console.log("data: ", err.data);
        console.log("message: ", err.message);
      });
  };

内置食谱调用方式 #

import Data from "../../Data/Recipes.json";

使用环境：react-native 0.72.1、react-native-blob-util 0.18.6

优化方案 #

1. 预解析+缓存结果 #

每次进板块都重新解析34MB的纯文本JSON完全是浪费，解析完成后直接把结果缓存起来：

• 用react-native-mmkv（比AsyncStorage性能高很多）存储解析后的食谱数据，下次进入直接读取缓存，跳过重复解析步骤
• 缓存时带上语言标识，切换语言时先检查对应语言的缓存是否存在，有缓存就直接使用，无缓存再下载解析

示例代码修改：

import MMKVStorage from "react-native-mmkv-storage";

const storage = new MMKVStorage.Loader().initialize();

const readDownloadedJson = async (lang) => {
  // 优先读取缓存
  const cachedRecipes = await storage.getObject(`recipes_${lang}`);
  if (cachedRecipes) {
    console.log(cachedRecipes.length);
    return cachedRecipes;
  }

  // 无缓存时再读取文件解析
  try {
    const fileContent = await ReactNativeBlobUtil.fs.readFile(recipesPath, "utf8");
    const parsedJson = JSON.parse(fileContent);
    console.log(parsedJson.length);
    // 存入缓存
    await storage.setObject(`recipes_${lang}`, parsedJson);
    return parsedJson;
  } catch (err) {
    console.log("status: ", err.status);
    console.log("data: ", err.data);
    console.log("message: ", err.message);
  }
};

2. 流式解析替代全量解析 #

全量读取文件再一次性解析会占用大量内存且耗时，换成流式解析方式：

• 用stream-json这类库，配合react-native-blob-util的流式读取能力，边读文件边解析数据
• 解析出部分食谱后即可先渲染界面，无需等待全量解析完成，大幅提升用户感知速度

3. 切换为二进制格式存储 #

JSON是文本格式，解析开销大，换成MessagePack或Protocol Buffers这类二进制格式：

• 服务器端将食谱数据序列化为MessagePack格式，下载后用msgpack-lite等库解析，速度比JSON快2-5倍
• 二进制文件体积比JSON小30%-50%，不仅下载更快，解析时也更节省资源

4. 分块加载食谱数据 #

不需要一次性加载全部4000个食谱，拆分后按需加载：

• 将大JSON拆分为多个小文件，进入板块时先加载热门/常用食谱，剩余内容在用户滚动到对应区域时再加载
• 或者在JSON中加入索引结构，先解析索引，用户点击某个分类后再加载对应食谱的详细数据

5. 优化JSON文件结构 #

简化数据层级，移除冗余字段：

• 将重复出现的字段（如分类名称）改为ID引用，减少文件体积和解析时的对象创建开销
• 扁平化数据结构，减少嵌套层级，让JSON.parse处理起来更高效

6. 用原生模块解析JSON #

React Native的JS线程解析大JSON性能有限，交给原生平台处理：

• iOS和Android的原生JSON解析器性能远高于JS引擎，可编写原生模块读取文件并解析，再将结果传递给JS层
• 也可借助react-native-blob-util的原生能力实现解析逻辑

补充：为什么内置JSON访问流畅？ #

内置的JSON文件在App打包阶段就被预处理，编译时已完成解析，运行时直接读取内存中的对象，不需要在用户使用时执行JSON.parse，因此速度更快。

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