我有一个ReactJS应用程序。我有100张国旗的图像（图标）。我需要在我的应用程序中使用它们。我有2种方法可以做到这一点，想知道最好的方法-1）我只需要拨打1 hhtp即可获取图像2）这是处理此情况的最佳方法。
方法1-我可以将所有100张图片都显示为图片。然后进行1个http调用以获取图像，并利用背景位置获取正确的图像。我想用这种方法知道a）如果使用CSS Sprites是现代的方式？还有更好的方法吗？b）如果使用CSS Sprite，是否有任何工具可以创建Sprite图片并获取正确的位置值？
方法2-在我的项目中，当前所有图像都在/ src / images文件夹中。如果将100张图片放入此文件夹中，它将发出100次http调用。如果我错了，请纠正我。我可以将它们放在/ public / images文件夹中，以便将图像捆绑在一起而不进行多余的http调用吗？ （如果引用公共文件夹中的任何图像文件，则会出现错误-“不支持src /外部的相对导入。”）无论如何，通常将图像放置在/ src / images或/ public / images中的什么位置？两者的优点是什么？
我会选择第二种选择。根据工具的不同，您可以使用Webpack或其他捆绑程序进行压缩（gzip或Brotli压缩）。
您可以优化图像以确保它们不会过大并且没有正确格式化，然后从反向代理服务器进行压缩并提供服务。
为了进一步提高性能，您可以延迟屏幕外资源，以便在需要时加载所需的图像，从而减小了初始获取的大小。
最后，您可以使用内存缓存，S3（或其他云存储）和内容交付网络（如Cloudforce，Akkimai等）将图像存储在用户附近的云中。 CDN经过优化可提供此类静态资产，可能需要考虑合并。