如何在基于 webpack-react-node 的网站中处理非常大的数据（100000 个 javascript 对象）？

Posted 2023-03-22

【中文标题】如何在基于 webpack-react-node 的网站中处理非常大的数据（100000 个 javascript 对象）？

【英文标题】：How do I handle very large data (100000 javascript objects) in webpack-react-node based website?

【发布时间】：2019-07-23 04:40:43

【问题描述】：

我有一个基于 react-node 的网站，我需要在其中处理接近 100000 个 javascript 对象的数据集，所有对象都包含相同的键集。必须实现各种功能，例如按名称搜索、排序、过滤的显示建议，所有这些都需要尽可能快。

我想到了几个选项：

1.) Storing all the data in a relational database (SQL) with keys as the column name.

v/s

2.) Storing all the data in a non-relational database (MongoDB) as an array of objects.

v/s

3.) Storing all the data in a .js file in the server as `export const data=Array-Of_Objects`

在在搜索框中输入输入时显示建议的功能中，我认为我不能一直返回数据库以获取所有对象然后执行处理以尽快找到最佳建议输入一个字母以保持快速的功能。

因此，我决定采用第三个选项，但包含所有数据的 .js 文件仍然接近 100 MB，并且没有使用 const data= require(./file.js) 导入数据，更不用说处理和找到最佳建议了，这当我将数据大小从 100000 个对象减少到（比如说）5000 个对象时，就会发生这种情况。

如果我把所有的数据分成不同的.js文件单独导入，我觉得还是所有文件的导入和数据的处理都不够快。

请建议我最好的遵循方法或免费使用的技术。

【问题讨论】：

您可以使用pagination 和lazy load。您可以将数据分成多个文件，并仅在需要时加载文件

【参考方案1】：

在我看来，最好的方法是将它们存储在 DB（MongoDB 或 RDBMS）中并实现延迟加载，不要在 React 组件中导入数据，这将导致性能问题，因为在这种情况下，Dom Tree 会很重，如果有的话数据的变化需要时间来比较哪个节点发生了变化。

如果您不想使用任何数据库，我建议您在此处使用json-server，您可以将数据存储在单个文件中，然后进行 rest 调用以获取数据并在 redux 中进行操作，此处为好吧，您可以使用延迟加载。

您只是将数据存储在某处（DB，js 文件），如果您有 100000 个 javascript 对象，您将如何访问数据并在组件性能中显示很重要，请确保您不会一次显示所有这些对象，所以最好在 redux 中过滤它，只将有用的数据传递给组件。

【讨论】：

谢谢。只要数据库或 json-server 有效，我就没有问题。我只是想澄清一些事情。我正在使用下拉菜单中的建议实现搜索功能，其中输入搜索输入的关键字与所有对象的“名称”键（甚至在提交之前）进行比较，下拉菜单显示响应，正如您在搜索时看到的Coursera 课程。将关键字传递给 redux、获取数据并将关键字与所有对象的“名称”键进行比较、返回响应是否会在我输入的每个字母时立即发生？

我已经在我的一个项目中实现了类似的功能，我会告诉你一个选项是调用 API 并从数据库本身获取过滤结果并显示在 UI 中，如果你的 API 需要很长时间返回结果您可以做的是，只要用户按下第一个 2/3 字符调用 API 获取结果假设您有 100000 条记录，因此一旦用户按下 2/3 字符，您的列表将小于实际大小，并且从下一个请求开始过滤在 java 脚本端本身。

谢谢technipank，这完全有帮助。我在输入 2-3 个字符时从 API 获取数据，然后在输入更多字符时在前端进行过滤。

如果回答有帮助，请接受我的回答并关闭这张票，Happy Coding :)

【参考方案2】：

现在一切正常。一旦用户按下第一个 2-3 个字符，我就会从数据库的后端访问数据。这样获得的结果比完整的数据库小。然后从下一个请求开始，我将过滤 javascript 本身的最后结果。