webpack-bundle-analyzer

번들링 파일이 포함하고 있는 모듈 시각화하기

지금까지 번들링한 파일들이 어떠한 모듈을 포함하고 있는지 시각적으로 확인한 적이 없으며 확인할 필요가 있다.

왜냐하면 중복된 라이브러리를 각 모듈이 포함하고 있으면 이것은 웹팩 성능 저하를 초래할 수 있기 때문이다.

또한 그와 동시에 번들링한 파일의 크기도 알고 싶을 수도 있다.

 

이러한 역할을 해주는 플러그인이 바로 webpack-bundle-analyzer이다.

이 플러그인은 웹팩을 실행하거나 npm명령을 입력하면 현재 프로젝트의 번들링 파일이 어떠한 모듈을 포함하고 있고 크기는 얼마인지 번들링 파일별로 확인할 수 있다.

이 플러그인은 다음과 같이 설치한다.

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

또한 설치 후 웹팩 실행파일에 아래와 같이 코드를 추가할 수 있으며 각 기능의 역할은 주석으로 설명해 놓았다.

// webpack.config.js 혹은 webpack.common.js
// ...
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
// ...
plugins: [
  // ...
  new BundleAnalyzerPlugin({

    // 기본값은 'server'이며 보고서를 브라우저에 표시하기 위해 http서버를 실행시킨다는 것이다.
    // 'static'은 분석 파일인 html 파일을 번들링 파일이 생성되는 곳에 저장한다는 것을 의미한다.
    // 'disabled'는 보고서 열람을 비활성화처리한다. 단 generateStatsFile에서 true로 설정하면
    // 보고서가 json으로 생성되어 번들링 파일이 생성되는 곳에 저장된다.
    analyzerMode : 'static',

    //보고서 html파일의 이름을 임의로 설정할 수 있다.
    reportFilename : 'bundle-report.html',

    // 기본값은 true이며 true 설정 시 보고서를 브라우저에 표시하기 위해 자동으로 브라우저가 열린다.
    openAnalyzer : false,

    // 기본값은 false이며 true 설정 시 보고서를 json으로 생성하며 번들링 파일이 생성되는 곳에 저장된다.
    generateStatsFile : true,

    // 보고서 json파일의 이름을 임의로 설정할 수 있다.
    statsFilename : 'bundle-stats.json'
  })
  // ...
]
// ...

웹팩을 빌드하면 html파일과 json파일이 생성되며 해당 파일들을 열람하면 번들링 파일에 대한 정보를 시각적으로 조회할 수 있다.