webpack/webpack-bundle-analyzer

어떤 프로젝트인가요?

핵심 기능

• 01번들 모듈을 보여 주는 인터랙티브 확대·축소 트리맵
• 02webpack 플러그인으로 사용하거나 stats 파일을 대상으로 독립 실행형 CLI로 사용
• 03압축된 번들을 파싱해 모듈의 실제 크기 표시
• 04stat, parsed, gzip, Brotli, Zstandard 크기 보고
• 05HTTP 서버, 정적 HTML 보고서 또는 JSON 파일로 출력
• 06사이드바나 컨텍스트 메뉴에서 청크 필터링

활용 사례

• webpack 프로젝트에서 용량이 크거나 실수로 포함된 의존성 찾기
• 최적화 과정에서 시간에 따른 번들 크기 변화 추적
• CI나 서버에서 기존 stats.json의 번들 검사
• 팀과 공유할 정적 번들 보고서 생성

빠른 시작

1. 1

   npm으로 플러그인을 개발 의존성으로 설치합니다

   npm install --save-dev webpack-bundle-analyzer
2. 2

   webpack 설정의 plugins 배열에 BundleAnalyzerPlugin을 추가하고 webpack을 실행합니다

사용 전 알아둘 점

• !webpack 번들만 분석하므로 다른 번들러의 출력에는 도움이 되지 않습니다.

포함된 컬렉션

토픽

자주 묻는 질문

webpack-bundle-analyzer은(는) 무엇인가요?

번들의 어떤 모듈이 가장 많은 용량을 차지하는지 보여 주는, 확대·축소 가능한 인터랙티브 트리맵을 렌더링하는 webpack 플러그인 및 CLI입니다. Webpack Bundle Analyzer를 사용하면 webpack 출력물에 실제로 무엇이 들어 있는지 확인할 수 있습니다. 각 번들을 인터랙티브하게 확대·축소할 수 있는 트리맵으로 그려 주며, 각 사각형은 모듈 하나를 나타내므로 번들 용량의 주된 원인을 쉽게 찾을 수 있습니다. 실수로 포함된 모듈을 찾아내거나 최적화할 부분을 결정하는 데 유용합니다.

webpack-bundle-analyzer은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

webpack-bundle-analyzer은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

webpack-bundle-analyzer은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. webpack-bundle-analyzer의 마지막 커밋은 2026년 11월 6일입니다.

webpack-bundle-analyzer은(는) 어디에 사용할 수 있나요?

webpack 프로젝트에서 용량이 크거나 실수로 포함된 의존성 찾기 최적화 과정에서 시간에 따른 번들 크기 변화 추적 CI나 서버에서 기존 stats.json의 번들 검사 팀과 공유할 정적 번들 보고서 생성

webpack-bundle-analyzer는 어떻게 설치하나요?

npm으로 플러그인을 개발 의존성으로 설치합니다: npm install --save-dev webpack-bundle-analyzer webpack 설정의 plugins 배열에 BundleAnalyzerPlugin을 추가하고 webpack을 실행합니다

webpack-bundle-analyzer은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/webpack/webpack-bundle-analyzer