Question

我对全栈开发比较陌生，目前正在设法找到一种有效的方法来在前端（反应）和后端之间send和fetch（ Express），同时最大程度地减少内存使用。具体来说，我正在构建一个映射应用程序，该应用程序需要我处理大型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是巨大的空间，对于您的用户而言可能是不合理的，尤其是在移动使用可能性很高的情况下。

如果可能的话，最好是在后端收集这些数据，最好将其放在磁盘上，然后根据需要仅将必要的数据提供给前端。由于地图需要更多数据，因此您将进一步调用后端。

如果这不可能，则可以使用客户端捆绑程序加载此数据。如果数据更新不是太频繁，您甚至可以将其缓存在前端。这样至少可以防止用户需要重复获取它。

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

以下是如何通过套接字从服务器流JSON的示例：how to stream JSON from your server via sockets