웹 번들 크기가 커졌을 때 원인을 찾는 분석 절차

무엇을 해결하나

프론트엔드 배포 후 JavaScript bundle이 증가했을 때 route별 chunk, dependency, 중복 모듈, source map을 비교해 원인을 찾을 때 사용합니다.

준비할 정보

• 실제 적용할 환경과 대상 범위를 먼저 적습니다.
• 현재 상태와 기대 결과를 숫자나 예시로 준비합니다.
• 운영 데이터, 개인정보, secret은 제거하거나 안전한 placeholder로 바꿉니다.
• 변경 작업이라면 승인자, backup, rollback 가능 여부를 확인합니다.

복사해서 쓰는 프롬프트

번들 회귀를 분석해줘.
framework·bundler: {{STACK}}
이전/현재 commit: {{SHAS}}
분석 report: {{BUNDLE_REPORTS}}
영향 route·지표: {{ROUTES_METRICS}}

크기 diff, 새 dependency, 중복, client boundary, dynamic import 후보를 근거와 함께 제시하고 최소 수정과 회귀 budget을 작성해줘.

실행 순서

1. placeholder를 실제 환경 정보로 바꾸되 secret 값은 입력하지 않습니다.
2. 먼저 조회와 미리보기로 대상 범위, 권한, 현재 상태를 확인합니다.
3. 결과가 예상과 맞을 때만 가장 작은 단위로 실행하거나 초안을 생성합니다.
4. 변경 전후의 수치와 화면을 같은 조건에서 비교해 기록합니다.
5. 이상이 있으면 작업을 넓히지 말고 중단 조건과 rollback 절차를 따릅니다.

결과 확인

동일한 production build 설정과 lockfile로 두 commit을 빌드하고 gzip/brotli transfer와 parse·execute 시간을 함께 비교합니다. 핵심 route의 실제 로딩을 측정합니다.

검수 결과에는 확인한 사실, 아직 확인하지 못한 가정, 다음 행동을 분리해서 남깁니다. 다른 사람이 같은 입력으로 재현할 수 있도록 환경과 확인 시각도 함께 기록하면 좋습니다.

주의사항

패키지 이름만 보고 삭제하거나 모든 component를 lazy load하지 않습니다. bundle analyzer에 source path나 환경 값이 노출되지 않게 공유 범위를 확인합니다.

AI가 만든 설명과 명령은 초안입니다. 실제 제품 버전과 조직 정책, 공식 문서를 대조하고 영향이 있는 작업은 dev나 격리 환경에서 먼저 검증하세요.