1

我正在使用React.js& Node.js( express& mongoose) & react-quill库来编辑我的内容的博客项目。

现在我正在将 react-quill 中的内容作为字符串 HTML 保存到我的反应状态。


...

const [content, setContent] = useState<string>('');

const onChange = (content: any, delta: any, source: any, editor: any) => {
  setContent(editor.getHTML());
};

<ReactQuill
  theme="snow"
  value={content}
  onChange={onChange}
  modules={modules}
/>

...

在将 HTML 作为字符串存储到我的状态后，我向POST我的快速应用程序发送请求，以将此字符串存储在我的 MongoDB 数据库中。

问题是，当我再次尝试在我的反应应用程序中获取此 HTML 时（在其中一个博客文章页面内），内容非常大（现在有 3 篇文章是 1MB）。

响应大小的图像： 在此处输入图像描述

响应结构图： 在此处输入图像描述

我的问题是如何保持数据的重量更轻？

谢谢你。

编辑：我没有提到我也在使用 react-quill 工具栏上传图片（也许这就是问题所在）

4

1 回答 1

1

我认为您的操作没有任何问题，并且我同意您的观点，即大小可能与在数据库中存储图像有关。

关于如何减少每条记录的大小，我有两个想法，但请在尝试其中任何一个之前阅读此答案的最后一部分。

  1. 在将文本存储到 MongoDB 之前尝试压缩文本。lz-string例如，如果你想在 JavaScript 中做所有事情，你可以使用类似的东西。
  2. 将每个静态资产（图像、样式表、脚本、视频等）存储在对象存储服务上，并保存对它的引用。例如，在您提供的图像上，您将图像编码为base64. 您可以获取该图像，将其存储在类似的东西S3中，然后在content值上替换对它的引用。

尽管这可能会增加数据库的大小，但您应该首先问自己是否需要它。如果您首先尝试弄清楚您的数据将如何随时间扩展以及这可能如何影响您对它的查询的响应时间，那将是最好的。如果您每次查询多个项目或只查询一个项目，答案会有所不同。

于 2021-05-21T01:55:49.600 回答