React 中小于 10kb 的图像使用数据 URI 而不是路径的原因是什么?

What is the reason behind having data URI instead of path for images less than 10kb in React?

Adding Images, Fonts, and Files 部分的 Create React App 文档中,他们说:

importing images that are less than 10,000 bytes returns a data URI instead of a path. This applies to the following file extensions: bmp, gif, jpg, jpeg, and png.

他们的原因是:

To reduce the number of requests to the server

但它是特定于 React 的工作方式(例如更新 DOM)还是为了减少加载时间而在 Web 开发中广泛传播的做法?

这不是 React 特有的做法。是否通过 React 或普通 HTML 呈现某些内容,如果使用数据 URI 呈现图像,如果代码中已经存在数据 URI(捆绑在 JS 中或硬编码到 HTML), 无需向服务器发出额外请求。

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

it's a wide spread practice in web development in order to reduce load times?

是的。

例如,如果网络服务器使用的是 HTTP 1.1,并且您有 25 张图像,其中 srcs 指向不同的文件,单独请求的绝对数量可能会带来问题 - 无论是否使用 React。

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