在 React 应用程序中本地加载图像比使用外部 URL 更快吗？

Question

我正在尝试理解，而且我对此很陌生。如果我部署一个 React 应用程序并将图像存储在 React 应用程序中，它会影响 React 应用程序的速度吗？第一次加载时是否会根据请求下载所有图像？如果是这样的话，最好选择外部图像吗？

外部的

  <img className="w-full rounded-lg" src="https://images.unsplash.com/photo-1551650975-87deedd944c3ixlib=rb1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2574&q=80" alt="Sunset in the mountains"></img>

内部的

import gameImg from "../../assets/images/game.jpg";

根据这个问题：网站图像性能：本地文件夹还是外部源？本地图像是个好方法。但反应应用程序也是如此吗？

Answer 1

对于标准的 Crate React 应用程序，行为取决于图像的大小。如添加图像、字体和文件文档中所述

小于 10000 字节且不以 .svg 结尾的图像将编码为数据 uri。这意味着它们嵌入到您的 JavaScript 包中，并在您的应用程序加载时直接有效地下载

对于其他大小，React 将它们复制到输出目录中的静态文件夹中。第一次使用图像时，浏览器会发出加载图像的请求。这相当于本地存储图像并且加载时间是可预测的。

对于外部图像，您的浏览器首先必须解析域名，建立新的 SSL 连接，然后才能发出下载请求，并且您还会遇到更多隐私问题。但这对于用户提供的内容和动态更新图像而无需重建来说是一个有效的解决方案。