Question

通过使用url引用图像或下载图像，将其保存到某个目录然后将其导入组件中，通常可以更好地使用图像吗？

例如

<img src="images.google.com/example.png" />

vs

import Example from './static/example.png';
<img src={Example} />

Answer 1

由于React没有任何加载或提供图像数据的方式，所以这个问题本质上是关于其他工具的，例如Webpack。

在本地存储图像并通过Webpack加载它们的好处是能够使用Webpack加载器处理它们，这使它们可以在图像足够小的时候内联它们（通过base64资源URL）并对其进行指纹识别。但是，您仍然希望将这些最终资产部署在CDN中。

仅通过字符串URL引用远程图像的优点是：没有较大的二进制图像使SCM存储库膨胀，不需要显式导入每个图像（请记住，Webpack中没有全局导入），并减少了Webpack的构建时间。

我怀疑大多数React应用程序最终都将同时使用这两种应用程序，通常是在不同的用例中。例如，我总是将本地图像用于徽标和应用程序资产，而对于任何用户上传的内容或较大的JPG / PNG资产，我都会引用外部文件。

Answer 2

CDN通常是传递静态文件（例如图像）的首选。由于Google Cloud CDN通过其边缘服务器缓存文件，因此访问者将从其最近的访问点开始向其访问者发送静态内容，而不是从应用程序运行所在的同一服务器开始。

将静态内容投放并缓存到世界各地的多个地理位置可确保最佳的内容交付时间。

但是，在本地进行开发，您可能会注意到在本地拥有静态内容的速度更快。这是正常现象，因为您是通过Internet还是从本地硬盘获取图像。但是，一旦您的应用程序被部署并运行（例如，来自加拿大），来自东欧的访问者A的交付时间可能会比来自美国的访问者B的交付时间慢。因为您是从一个地理位置为全球客户群提供服务，所以来自完全不同时区的访问者在交付内容时会受到不公平的对待。

从另一个角度看，为什么不两者兼而有之？让您的应用程序提供CDN中的静态内容，但也将您的静态内容存储在同一应用程序文件夹中，如果CDN失败，则可以优雅地落入本地文件夹中。

TL; DR 如果您有大量的客户需要优化，请从CDN（url）提供图像。

使用图片网址与在本地导入图片

2 个答案: