webpack-bundle-analyzer 사용하기

🤔 webpack-bundle-analyzer란 무엇인가?

webpack-bundle-analyzer는 Webpack에서 생성된 번들의 크기를 시각적으로 분석할 수 있는 도구이다.

• Webpack 빌드 과정에서 생성된 번들을 트리 형태의 인터랙티브한 시각화로 보여준다.
• 번들의 구조를 분석하여 어떤 모듈이 포함되어 있고, 각각의 모듈이 얼마나 많은 크기를 차지하는지 한눈에 파악할 수 있다.
  
  

🔎 webpack-bundle-analyzer 활용법

webpack-bundle-analyzer는 아래와 같은 상황에서 활용된다.

• 번들 크기 개선: 번들에 포함된 불필요하거나 중복된 모듈을 식별하여 번들 크기를 줄일 수 있다.

• 로딩 성능 개선: 번들의 크기가 클수록 로딩 시간이 증가하므로, 이를 최적화하여 사용자 경험을 개선할 수 있다.

• 디펜던시 관리: 예상보다 큰 외부 라이브러리나 불필요한 라이브러리를 발견하여 효율적으로 관리할 수 있다.

• 코드 분리 검토: 코드 스플리팅 상태를 확인하고, 적절히 분리되지 않은 모듈을 찾아 수정할 수 있다.

• 의존성 추가 후 점검: 새로운 라이브러리를 추가한 후, 번들 크기와 성능에 미치는 영향을 분석할 수 있다.

• 불필요한 모듈 제거: 중복되거나 사용하지 않는 모듈을 제거할 필요성을 파악할 수 있다.

✅webpack-bundle-analyzer 사용 방법

1. 설치

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

yarn add --dev webpack-bundle-analyzer

2. Webpack 설정에 플러그인 추가

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
  // Webpack 설정...
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'server', // 'server', 'static', 'disabled' 옵션 가능
      openAnalyzer: true,    // 브라우저에서 결과 자동 오픈 여부
      generateStatsFile: false, // stats.json 파일 생성 여부
      statsFilename: 'stats.json', // stats 파일 이름
      logLevel: 'info',      // 로그 수준
    }),
  ],
};

분석 모드 설정

• server: 로컬 서버를 실행하여 브라우저에서 결과를 볼 수 있다.
• static: HTML 파일로 번들 분석 결과를 생성한다.
• disabled: 분석 도구를 비활성화한다.

4. Webpack 빌드 실행

npm run build

빌드가 완료되면 브라우저에 분석 결과가 나타난다(또는 HTML 파일이 생성된다)

혹시라도 잘못된 내용이 있거나 질문사항 있으시면 댓글 남겨주세요! 어떤 댓글이든 달게 받겠습니다!