📚 Reference

📜 Chapter

‣

@next/bundle-analyzer

devtool

초기 번들 크기

• 보통 빌드 결과물이나 번들 분석 도구에서 확인한다.

빌드 결과물에서 확인

• 프로젝트를 빌드하면 dist, .next, build 같은 폴더가 생기고, 그 안에 JS/CSS 파일 크기가 나온다.

• 예를 들어 Vite 프로젝트라면:

  pnpm build
  

  빌드 후 터미널에 이런 식으로 나와요.

  dist/assets/index-a1b2c3.js850.32 kB
  dist/assets/vendor-d4e5f6.js620.10 kB
  dist/assets/index.css42.11 kB
  

• 여기서 초기 화면 로딩에 필요한 JS/CSS 파일 크기를 보고 “초기 번들 크기”라고 말할 수 있다.

• 다만 전체 dist 폴더 크기와 초기 번들 크기는 달라요. 초기 번들은 처음 페이지 진입 시 바로 로드되는 파일들 기준으로 봐야 한다.

Network 탭에서 확인

• 브라우저 DevTools → Network 탭에서도 볼 수 있다.
• 확인 순서는 이렇게 하면 된다.
  1. DevTools 열기
  2. Network 탭 이동
  3. Disable cache 체크
  4. 새로고침
  5. JS, CSS 필터 선택
  6. 처음 로드되는 파일들의 Size / Transferred 확인
• 여기서 중요한 건 두 가지예요.
• Size는 실제 리소스 원본 크기에 가깝고, Transferred는 gzip, brotli 같은 압축이 적용되어 네트워크로 전송된 크기이다.