Webpack 번들 성능 확인 가이드

 

 

---

 

개요

웹 애플리케이션이 커질수록 번들 크기, 로딩 속도, 중복 모듈 문제는 성능에 직접적인 영향을 미칩니다. 이번 포스팅에서는 Webpack 번들 성능을 확인하고 분석하는 방법을 단계별로 정리합니다.

 

성능 체크리스트

• 초기 페이지에 필요한 JS만 로드되는가?
• 청크가 브라우저 캐싱으로 재사용 가능한가?
• 최초 렌더링 성능(FCP/LCP)이 좋아졌는가?

 

1. Webpack 통계 JSON 생성

Webpack은 빌드 시 모듈별 통계가 포함된 JSON 파일을 생성하게 해주는 Stats Data 기능을 지원합니다.

이 JSON 파일에는 번들 구조, 모듈별 크기, 청크 구성, 빌드 시간 등의 정보가 포함됩니다.

$ npx webpack --config webpack/webpack.config.prod.js --profile --json stats.json

• 위 명령어 실행 후 stats.json 파일이 생성됩니다.
• 예시: 45,268KB의 stats.json 파일 생성

이 파일은 시각화 도구를 통해 번들 구조를 분석하는 데 사용됩니다.

💡 Tip
빌드 후 stats.json을 웹 기반 분석 사이트(Webpack Analyse)에 업로드하면 모듈 의존성, 청크 구조, 빌드 경고/에러, 최적화 힌트 등 많은 정보를 확인할 수 있어 실무에서 유용합니다.

 

 

2. Bundle Analysis 및 시각화 도구

JSON 통계를 활용하면 번들의 구조와 모듈 사용 현황을 쉽게 파악할 수 있습니다.

 

코드 분할을 시작하면 출력을 분석하여 모듈이 어디에 있는지 확인하는 것이 유용할 수 있습니다. 공식 분석 도구는 시작하기에 좋은 곳입니다. 커뮤니티에서 지원하는 다른 옵션도 있습니다.

 

추천 도구

• webpack-chart : 웹팩 통계에 대한 대화형 원형 차트입니다.
• webpack-visualizer : 번들을 시각화하고 분석하여 어떤 모듈이 공간을 차지하고 있는지, 어떤 모듈이 중복될 수 있는지 확인하세요.
• webpack-bundle-analyzer : 번들 콘텐츠를 편리한 대화형 확대/축소 가능 트리맵으로 나타내는 플러그인 및 CLI 유틸리티입니다.
• webpack bundle optimize helper : 이 도구는 번들을 분석하고 번들 크기를 줄이기 위해 개선할 사항에 대한 실행 가능한 제안을 제공합니다.
• bundle-stats : 번들 보고서(번들 크기, 자산, 모듈)를 생성하고 다양한 빌드 간의 결과를 비교합니다.
• webpack-stats-viewer “ 웹팩 통계용 빌드가 포함된 플러그인입니다. webpack 번들 세부사항에 대한 추가 정보를 표시합니다.

다른 모든 경우에 webpack은 번들, 청크 및 타이밍 세부 정보를 보여주는 일련의 통계를 출력합니다. 이 옵션을 사용하면 출력이 JSON 객체가 될 수 있습니다. webpack의 분석 도구, chrisbateman의 webpack-visualizer 또는 th0r의 webpack-bundle-analyzer 에서 이 응답이 수락됩니다. 이러한 분석 도구는 JSON을 가져와서 빌드의 모든 세부 정보를 그래픽 형식으로 제공합니다.

728x90

 

Bundle Analyzer 실행 예시

터미널에서 빌드 후 Bundle Analyzer 실행하면 번들의 내용을 대화형 트리맵으로 시각화해 볼 수 있습니다.

시각화를 통해 번들 내 모듈 구조, 크기, 중복 모듈, 실수로 포함된 불필요 모듈 파악 가능합니다.

 

프로젝트 코드를 번들링 한 후 아래 명령어를 실행합니다. 정상 동작시 브라우저 창이 자동으로 열립니다. 

- http://127.0.0.1:8888

# stats.json 파일과 번들 경로 지정
$ npx webpack-bundle-analyzer ./stats.json ./dist --mode server --port 8888

 

 

3. 중복 코드 확인

• SplitChunksPlugin 설정 후 공통 모듈이 여러 청크에 중복되는지 확인합니다.
• stats.json 혹은 Bundle Analyzer를 통해 중복 여부를 쉽게 확인할 수 있습니다.
• Lodash, React 같은 대형 라이브러리는 초기 번들에서 제거 가능 (noParse, externals, dynamic import 활용)

 

4. 빌드 성능 확인

• 빌드 시간이 길면 개발 생산성에 큰 영향을 줍니다.
• 각 로더 및 플러그인 실행 시간 확인 가능
• SpeedMeasurePlugin을 활용하면 로더/플러그인별 실행 시간 시각화 가능

 

5. 실제 로딩 성능 확인

번들 성능은 브라우저에서 확인하는 것이 가장 현실적입니다.

 

1. Chrome → Network 탭

파일 크기, 요청 개수, gzip 압축 여부, lazy-load 청크 로딩 타이밍 확인

 

 

2. Chrome → Performance 탭

JS 실행 시간, 메인 스레드 사용량 확인

 

 

3. Lighthouse

초기 로딩 속도(FCP/LCP), JS 실행 시간, 번들 최적화 수준 평가

 

Chrome 브라우저에서 확장 프로그램을 설치하면 개발자 도구(DevTools)에서 확장 기능으로 사용할 수 있습니다.
자세한 설정 방법은 아래 포스팅에서 확인할 수 있습니다.

• https://sillimmouse.tistory.com/116

 

마무리

번들 크기만 보는 것보다 압축 후 실제 전송량과 초기 로딩 시간이 중요합니다.

큰 라이브러리(React, Lodash 등)는 noParse, externals, dynamic import를 활용해 초기 번들에서 제거하면 성능 개선에 효과적입니다.

통계 JSON + 시각화 도구를 활용하면 번들 구조, 중복 모듈, 최적화 가능 영역을 한눈에 파악할 수 있습니다.