집 나간 네트워크는 돌아왔는데 React.lazy는 왜 안 돌아올까
프론트엔드
집 나간 네트워크는 돌아왔는데 React.lazy는 왜 안 돌아올까
두줄요약
네트워크 복구 후에도 React.lazy 재시도가 막히는 이유를 모듈 맵 캐시로 설명했습니다. 정적 import 전환과 사전 로딩으로 오류를 해결했습니다.
문제 상황
- 배민주문접수 웹뷰에서 네트워크 OFF 후 ON으로 바꾼 뒤 다른 화면 이동 시 오류 화면이 반복 노출되는 현상
- React.lazy 재시도, 쿼리스트링 변경, 새로고침 모두 실사용 제약이나 브라우저 동작 때문에 실패
원인 분석
- dynamic import 실패가 브라우저의 모듈 맵에 기록되어 같은 URL 재호출도 즉시 거부
- 실패 상태가 document 단위로 유지되어 React.lazy 바깥의 캐시 문제로 이어짐
- 공유 청크나 정적 경로가 빌드 결과에 고정되어 실행 중 주소 변경도 한계 존재
해결 방법
- 화면 단위 React.lazy 제거 후 정적 import로 전환하고 manualChunks로 번들 크기 완화
- import() 전에 fetch()로 연결 상태를 먼저 확인하고, 부팅 직후 주요 화면을 미리 로딩
- React.lazy 직접 사용을 린트 규칙으로 차단해 재발 방지
