빌드 결과물
자바스크립트 번들, CSS, 정적 자산으로 나옵니다. 파일 이름에 해시가 붙어 내용이 바뀌면 이름도 바뀝니다. 캐시 전략의 기반입니다.
이 파트에서 다루는 내용
빌드 결과물체감 성능 지표개선 순서배포와 캐시
01
느린 원인이 렌더링이 아닌 경우가 더 많습니다
Part 6에서 렌더링 최적화를 다뤘지만, 사용자가 느끼는 느림의 상당 부분은 첫 화면이 뜨기까지의 시간입니다.
번들이 크면 내려받고 해석하는 데 시간이 걸리고, 그동안 화면은 비어 있습니다. 메모이제이션을 아무리 해도 이 시간은 줄지 않습니다.
번들 분석
어떤 라이브러리가 용량을 차지하는지 시각화합니다. 대개 소수의 라이브러리가 대부분을 차지합니다.
자주 발견되는 것
- 차트, 편집기, 날짜 라이브러리가 전체 화면에 포함
- 아이콘 세트 전체를 통째로 포함
- 쓰지 않는 언어팩과 로케일 데이터
- 개발용 도구가 운영 빌드에 포함
02
체감 성능은 정해진 지표로 측정합니다
빠르다는 느낌은 사람마다 다릅니다. 브라우저가 정의한 공통 지표를 쓰면 팀이 같은 기준으로 이야기할 수 있습니다.
가장 큰 요소 표시 시간
화면의 주요 콘텐츠가 보이기까지 걸리는 시간입니다. 큰 이미지와 초기 번들 크기의 영향을 크게 받습니다.
상호작용 반응 시간
사용자가 조작했을 때 화면이 반응하기까지의 시간입니다. 무거운 렌더링이 여기에 영향을 줍니다. Part 6과 이어집니다.
화면 흔들림
요소가 뒤늦게 나타나 이미 읽던 내용이 밀리는 정도입니다. 이미지 크기를 미리 지정하면 대부분 해결됩니다.
측정 방법
브라우저 개발자 도구의 성능 감사 기능으로 확인합니다. 개발 서버가 아니라 운영 빌드 기준으로 측정해야 의미가 있습니다.
03
효과가 큰 순서대로 손봅니다
- 1. 라우트 단위 코드 스플리팅을 적용합니다. Part 10에서 다룬 방법이며 효과가 가장 큽니다.
- 2. 무거운 라이브러리를 필요한 화면에서만 불러오도록 분리합니다.
- 3. 이미지를 압축하고 적절한 형식과 크기로 제공합니다. 화면 밖 이미지는 늦게 불러옵니다.
- 4. 목록이 아주 길면 화면에 보이는 부분만 그립니다.
- 5. 그다음에 렌더링 최적화를 검토합니다.
이미지가 가장 흔한 원인
수 메가바이트짜리 원본 이미지가 그대로 올라가 있는 경우가 많습니다. 자바스크립트를 줄이는 것보다 효과가 클 때가 있습니다.
폰트
웹폰트 로딩 중 글자가 안 보이거나 나중에 바뀌면 화면이 흔들립니다. 필요한 굵기만 포함하고 표시 방식을 지정합니다.
측정 없이 바꾸지 않기
개선 전후를 같은 조건에서 측정합니다. 체감으로 판단하면 효과 없는 작업에 시간을 쓰게 됩니다.
04
배포와 캐시에서 자주 겪는 문제
이전 버전이 계속 보임
index.html이 캐시되면 새 빌드가 반영되지 않습니다. 해시가 붙은 자산은 길게 캐시하고 index.html은 캐시하지 않는 것이 기본입니다.
직접 URL 접속 시 404
Part 10에서 다룬 문제입니다. 모든 경로를 index.html로 연결하도록 설정합니다.
배포 중 청크 로딩 실패
사용자가 페이지를 열어 둔 상태에서 새 버전이 배포되면 이전 청크를 찾지 못합니다. 로딩 실패 시 새로고침을 안내하는 처리가 필요합니다.
소스맵 노출
운영 빌드에 소스맵을 공개하면 원본 코드가 그대로 드러납니다. 오류 추적 도구에만 올리고 공개 배포에서는 제외합니다.
환경변수 재확인
빌드 시점에 값이 박히므로, 환경이 바뀌면 다시 빌드해야 합니다. 같은 결과물을 여러 환경에 쓸 수 없습니다.
CI/CD 연결
빌드, 테스트, 배포를 파이프라인으로 묶습니다. 빌드 산출물을 그대로 배포해 환경 간 차이를 없앱니다.
정리
프런트엔드 성능 작업은 렌더링 최적화부터 시작하는 경우가 많지만, 실제로는 번들 크기와 이미지가 더 큰 비중을 차지합니다. 측정해서 원인을 확인한 뒤 순서대로 손보는 것이 시간을 아끼는 방법입니다.
버전
버전별 참고
본문은 React 19 기준입니다. 18과 달라지는 부분은 아래에 정리합니다.
- 빌드 도구는 React 버전과 별개입니다. 최근 신규 프로젝트는 대부분 Vite를 사용합니다.
- React 19의 문서 메타데이터와 리소스 사전 로딩 지원으로 일부 로딩 최적화를 컴포넌트 안에서 선언할 수 있습니다.
- React Compiler를 적용하면 상호작용 반응 시간 개선에 도움이 될 수 있지만, 초기 로딩 시간과는 관계가 없습니다.
체크