번들 크기를 줄이려면 무엇부터 확인하고 개선하나요?

이렇게 답해 보세요 (핵심 답변)

가장 먼저 번들 분석 도구(webpack-bundle-analyzer 등)로 프로덕션 빌드 산출물을 시각화해, 어떤 라이브러리와 모듈이 실제로 큰 비중을 차지하는지 확인합니다. 그다음 초기 진입에 당장 필요 없는 라우트나 무거운 모달·차트 컴포넌트를 React.lazy와 동적 import()로 코드 분할(Code Splitting)하고, Tree Shaking이 잘 동작하도록 모듈 import 방식과 거대 라이브러리(예: 전체 로케일·아이콘 묶음)를 정리합니다. 아울러 네트워크 전송 크기를 줄이는 Gzip/Brotli 압축과 브라우저가 파싱·실행해야 하는 실제 압축 해제 JS 크기를 함께 확인해 초기 로딩 지연을 줄입니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. 추측으로 작은 유틸리티 코드를 고치기보다 번들 분석기로 가장 큰 의존성 한두 개를 찾고 분할·대체하는 것이 훨씬 효과적입니다.
2. 코드를 너무 잘게만 쪼개면 페이지 이동 시 네트워크 요청 수와 순차 로딩(Waterfall) 지연이 늘어날 수 있으므로 라우트와 주요 기능 단위로 균형 있게 나눕니다.

면접에서 자주 하는 실수

원본 소스 코드 줄 수를 줄인 것이나 단순 Gzip 전송 크기만 보고 브라우저의 JS 파싱·실행 비용까지 똑같이 줄었다고 단정해서는 안 됩니다.