>

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
    }
 }

네트워크 탭에서 여러 이미지를 볼 수 있습니다 :

그러나 개발 도구를 사용하여 느린 연결을 시뮬레이션하면 이미지가 모두 정확히 동시에 나타납니다. 실제로 여러 개의 HTTP 요청이없고 Webpack이 다른 방법으로이 성능 최적화를 수행하고 있는지 궁금합니다.

내 질문을 요약하면 : 배경 CSS 이미지를 단일 스프라이트 시트로 결합하면 HTTP 요청 수가 줄어들어 성능이 향상됩니까?

  • 답변 # 1

    CRA 문서에서 답변을 찾을 수 있습니다.

    와이즈 비즈

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

    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.

관련 자료

  • 이전 python - QCalendarWidget을 사용자 정의하는 방법은 무엇입니까?
  • 다음 d3.js - 이벤트 드롭에 "지금"라인을 표시하고 오른쪽에 약간의 여백을 추가하십시오