在 React 中使用数据 URI 而不是小于 10kb 的图像的路径的原因是啥？

Posted 2023-03-10

【中文标题】在 React 中使用数据 URI 而不是小于 10kb 的图像的路径的原因是啥？

【英文标题】：What is the reason behind having data URI instead of path for images less than 10kb in React?在 React 中使用数据 URI 而不是小于 10kb 的图像的路径的原因是什么？

【发布时间】：2021-05-13 16:09:25

【问题描述】：

在 Adding Images, Fonts, and Files 部分内的 Create React App 文档中，他们说：

导入图片 小于 10,000 字节返回数据 URI 而不是路径。这 适用于以下文件扩展名：bmp、gif、jpg、jpeg 和 png.

他们的原因是：

减少对服务器的请求数

但它是特定于 React 的工作原理（例如更新 DOM）还是 Web 开发中广泛传播的实践以减少加载时间？

【参考方案1】：

这不是 React 特有的做法。无论是通过 React 还是通过普通 html 呈现某些内容，如果使用数据 URI 呈现图像，如果数据 URI 已经存在于代码中（捆绑在 JS 中或硬编码到 HTML 中），则无需对必须建立服务器。

相反，如果您有 src="theImage.png" 之类的内容，则会向服务器发出请求以下载图像。

这是为了减少加载时间而在 Web 开发中广泛传播的做法？

是的。

例如，如果 Web 服务器使用的是 HTTP 1.1，并且您有 25 张图片，其中 srcs 指向不同的文件，那么单独的请求的绝对数量可能会出现问题 - 无论 React 是否使用与否。

（HTTP/2 至少在一定程度上缓解了这个问题 - 请参阅 here）