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 张图像,其中 src
s 指向不同的文件,单独请求的绝对数量可能会带来问题 - 无论是否使用 React。
(HTTP/2 至少在一定程度上缓解了这个问题 - 请参阅 )
在 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 张图像,其中 src
s 指向不同的文件,单独请求的绝对数量可能会带来问题 - 无论是否使用 React。
(HTTP/2 至少在一定程度上缓解了这个问题 - 请参阅