javascript - 如何发送和接收大型 JSON 数据

Question

我是全栈开发的新手，目前正在尝试找出一种有效的方法来发送和获取我的前端之间的大数据(React ) 和后端 (Express)，同时最大限度地减少内存使用。具体来说，我正在构建一个 map 应用程序，它需要我处理大型 JSON 文件 (10-100mb)。

我当前的设置适用于较小的 JSON 文件:

后端:

const data = require('../data/data.json');

router.get('/', function(req, res, next) {
  res.json(data);
});

前端:

componentDidMount() {
      fetch('/')
      .then(res => res.json())
      .then(data => this.setState({data: data}));
  }

但是，如果 data 大于 ~40mb，如果我在本地测试，后端会因为内存不足而崩溃。此外，使用 require() 保存数据也需要相当多的内存。

我做了一些研究并对 JSON 解析、字符串化、流式传输有了一般性的了解，我认为答案在于使用分块 json 流一点一点地发送数据，但我几乎不知所措它的实现，尤其是使用单个 fetch() 来实现(这甚至可能吗？)。

非常感谢有关如何处理此问题的任何建议。

Answer 1

首先，40mb 太大了，对您的用户来说可能不够体贴，尤其是在移动设备使用的可能性很高的情况下。

如果可能，最好在后端收集这些数据，可能将其放在磁盘上，然后只在需要时向前端提供必要的数据。由于 map 需要更多数据，您需要进一步调用后端。

如果这不可能，您可以使用客户端包加载此数据。如果数据更新不是太频繁，你甚至可以把它缓存在前端。这至少可以防止用户需要重复获取它。

或者，您可以通过服务器上的流读取 JSON 并将数据流式传输到客户端并使用类似 JSONStream 的东西在客户端解析数据。

这是一个如何通过套接字从服务器流式传输 JSON 的示例:how to stream JSON from your server via sockets