React · Build

React 빌드에서 확인할 산출물과 환경값

React 앱 빌드는 운영 서버에 올릴 파일을 만드는 단계이므로, 번들 크기, 환경 변수, source map, SPA fallback을 함께 확인해야 한다.

01

환경 설정

운영 API URL과 공개 환경 변수 prefix를 빌드 전에 고정한다.

02

산출물 생성

번들러가 모듈 그래프를 압축하고 hash가 붙은 정적 파일을 만든다.

03

결과 점검

초기 chunk 크기, source map 공개 여부, asset 경로를 확인한다.

04

배포 연결

정적 호스팅에서 깊은 route 새로고침이 index.html로 fallback되게 설정한다.

Hash asset
장기 캐시 내용이 바뀐 파일만 새 이름을 받아 캐시 무효화
HTML은 짧게 캐시
Env
빌드 시 주입 VITE_ 또는 REACT_APP_ 공개 변수만 클라이언트에 포함
비밀키 금지
Chunk
로드 단위 초기 화면과 지연 route의 코드를 나눔
너무 큰 vendor 확인
Fallback
SPA URL /settings 새로고침도 앱 HTML 반환
호스트별 rewrite 규칙

비밀값 · 프리뷰 · 라우팅 점검

비밀값 브라우저 번들에 서버 비밀이 들어가지 않는다.
프리뷰 build 결과를 preview 서버에서 실제로 확인한다.
라우팅 배포 후 깊은 URL 직접 접근이 동작한다.
크기 초기 JS와 폰트, 이미지가 성능 예산을 넘지 않는다.