How I Cut a 2.1 MB JavaScript Bundle to 890 KB With Claude Code

개요

Claude Code를 활용하여 2.1MB의 JavaScript 번들 크기를 890KB로 성공적으로 축소했으며, 이는 Lighthouse 성능 점수를 41점에서 88점으로 향상시키는 결과를 가져왔다.

주요 내용

* 문제 정의: 3년간 축적된 코드 베이스로 인해 초기 JavaScript 번들 크기가 2.1MB에 달했으며, 모바일 사용자의 느린 상호작용 시간(8.4s)과 높은 이탈률(11%)을 야기했다. 번들 최적화 작업은 수많은 코드베이스를 탐색해야 하는 아키올로지 작업에 비유된다.
* 초기 접근의 실패: Claude Code에 "프로젝트 분석 및 JavaScript 번들 크기 축소"를 지시했을 때, 이미 적용된 최적화만 제안하거나 사소한 라이브러리 교체를 추천하는 등 피상적인 답변만 제공했다. 이는 AI가 실제 데이터 없이 일반적인 조언만 제공하기 때문이다.
* 해결 과정:
* 측정 가능한 데이터 제공: vite build --mode production && node scripts/bundle-report.mjs 명령어를 통해 생성된 JSON 형식의 번들 리포트(모듈별 바이트 기여도)를 Claude Code가 읽도록 했다.
* "하나의 변경, 하나의 측정" 프로토콜: 복수의 최적화를 한 번에 적용 시 문제 추적이 어려워짐을 방지하기 위해, 한 번에 하나의 변경 사항만 적용하고, 번들 크기 및 테스트 결과를 측정 및 커밋하는 절차를 엄격히 준수했다.
* 주요 최적화 내용:
* 모든 로케일을 포함한 날짜 라이브러리 제거 (-312KB)
* 아이콘 세트 전체를 임포트하는 배럴 파일 대신 개별 아이콘 임포트로 변경 (-418KB)
* 전체 경로 중 한 페이지만 사용하는 차트 라이브러리를 동적 임포트로 변경 (-284KB)
* 지원 중단된 브라우저(IE 11)를 위한 폴리필 제거 (-156KB)
* 영구적인 개선을 위한 가드레일 설정:
* ESLint 규칙: 특정 라이브러리(예: @acme/icons, moment)의 직접 임포트를 제한하고 대체 방법을 명시하는 규칙을 추가하여 재발 방지.
* CI 내 번들 크기 예산 설정: 빌드 시 번들 크기가 특정 임계값(950KB)을 초과하면 빌드가 실패하도록 CI 환경에 예산을 설정.

시사점

AI 코드 생성 모델은 실제 빌드 아티팩트와 명확한 측정 기준을 제공받을 때, 반복적이고 데이터 집약적인 번들 최적화 작업에서 인간보다 뛰어난 성과를 보일 수 있으며, 이러한 최적화는 코드 감시 및 CI 예산과 같은 영구적인 가드레일을 통해 유지되어야 한다.