在Create React App中使用图片精灵是否可优化多背景图性能？

嘿，先帮你理清你看到的「慢速网络下所有图片同时加载完成」的现象：Create React App（CRA）自带的Webpack配置，对图片资源有一套默认处理逻辑：

• 要是你的图片小于10KB（这个阈值是CRA默认设置的，除非你 eject 或者用工具改配置，不然没法调整），Webpack会直接把图片转成Base64字符串嵌到CSS或者JS里，这种情况根本不会产生HTTP请求；
• 要是图片超过这个大小，就会被打包成单独的静态文件，浏览器会发请求去加载它们。

你在网络面板看到多张请求，但慢速下同时完成，其实是现代浏览器的并行请求机制在干活——同一域名下，浏览器一般允许同时发起6-8个请求，所以多张图片会一起开始加载，差不多时间完成，并不是Webpack帮你合并了请求哦。

接下来回到你最关心的问题：把CSS里的背景图合并成图片精灵，能不能减少HTTP请求、提升性能？

答案得看具体情况，分两种场景说：

1. 图片都被转成Base64的情况 #

如果你的背景图都是小图（小于10KB），Webpack已经把它们嵌到代码里了，这时候搞精灵图完全没必要——本来就没HTTP请求，合并之后反而会让CSS/JS文件变大，加载起来更慢，得不偿失。

2. 图片是独立静态文件的情况 #

要是你的图片比较大，Webpack输出了好几个单独的图片文件，这时候合并成精灵图确实能减少HTTP请求的数量。不过这里也得考虑几个现实问题：

• HTTP/2的影响：现在大部分浏览器都支持HTTP/2了，它允许在同一个TCP连接里同时传多个资源，多请求的性能损耗已经比HTTP/1时代小很多。这时候减少请求带来的性能提升，其实没那么明显；
• 维护成本：精灵图需要你手动调整每个背景图的background-position，以后加新图或者改旧图，都得重新做精灵图、改CSS，比直接用单图麻烦多了；
• 按需加载的问题：要是你的组件是按需加载的，单张图片可以跟着组件一起按需加载，而精灵图是整体加载的，可能会加载一些当前用不到的图片资源。

给你的实用建议 #

• 先看看你的图片大小：如果都是小图，就老老实实按CRA官方推荐的方式用，别折腾精灵图了；
• 要是有不少大图，而且你的用户里还有很多用HTTP/1环境的（比如旧浏览器、老旧网络），那可以考虑用精灵图；不然的话，优先保持单图导入的方式，既省心性能也不差；
• 另外，要是你想用SVG精灵，CRA也支持，但得 eject 或者用react-app-rewired改Webpack配置，这会增加项目复杂度，得权衡好再弄。

内容的提问来源于stack exchange，提问作者Evanss