create-react-app - 在 Create React App 中拼接图像有什么好处？

Question

我的 CSS 中使用了多个背景图片。过去的最佳做法是将图像组合到单个 Sprite 表中以减少 HTTP 请求的数量。

从查看 Create React App 文档来看，没有提到 sprite。相反，它建议将图像直接导入 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
    }
 }

通过查看我的网络选项卡，我可以看到多个图像:

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

总结一下我的问题:如果我将我的背景 CSS 图像合并到一个 Sprite 表中，这会减少 HTTP 请求的数量并因此提高性能吗？

Answer 1

您可以在 CRA 文档中找到答案:

To reduce the number of requests to the server, importing images that are less than 10,000 bytes returns a data URI instead of a path. This applies to the following file extensions: bmp, gif, jpg, jpeg, and png. SVG files are excluded due to #1153.

https://facebook.github.io/create-react-app/docs/adding-images-fonts-and-files