我的CSS中使用了多个背景图像 . 最常见的做法是将图像组合成单个精灵表，以减少HTTP请求的数量 .

从查看Create React App文档，没有提到精灵 . 相反，它建议将图像直接导入CSS：

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-fonts-and-files

作为测试，我已经做到了这一点 . 所以React组件的CSS看起来像这样：

.component {
    &:before {
        background-image: url('./img/account.svg'); // This image is within the React component's folder
    }
 }

从查看我的网络选项卡，我可以看到多个图像：

enter image description here

但是，当我使用开发工具来模拟慢速连接时，图像都会完全同时出现 . 这让我想知道实际上是不是有多个HTTP请求而Webpack正在以其他方式进行这种性能优化？

总结一下我的问题：如果我要将我的后台CSS图像合并到一个精灵表中，这会减少HTTP请求的数量，从而提高性能吗？

create-react-app