webpack bundle analyzer 웹팩 플러그인 설정 방법

웹팩 번들 분석 플러그인(webpack bundle analyzer Plugin) 은 웹팩을 이용하여 번들링되는 모듈들을 분석해서 보기 좋게 시각적으로 표현해주는 모듈이다. 모듈의 용량을 분석하여 효율적으로 모듈을 관리할 수 있도록 도와준다.

 

앱이 크면 클수록 모듈 종류가 많아지며, 용량이 커져 무거워지게 되는데 이때 필수인 webpack bundle analyzer! 이를 이용하여 큰 모듈의 경우 minify 버젼을사용하거나 다른 방법으로 줄일 수 있다.  오늘은 어떻게 webpack bundle analyzer 세팅하는지 알아보자.

 

 

먼저 해당 플러그인을 Dev 모드로 설치하자

 

# NPM 

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

# Yarn 

yarn add -D webpack-bundle-analyzer

 

그 다음 webpack.config.js 파일에 들어가서 아래와 같이 설정해주면 된다.

 

 

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

 

module.exports = {

  plugins: [

    new BundleAnalyzerPlugin()

  ]

}

 

 

다만 위와 같이 기본 세팅을 할 경우,  npm run start(yarn run start) 실행하거나 혹은 npm run build(yarn run build) 빌드을 실행하면 해당 플러그인이 자동적으로 같이 열려지게 된다. 같이 플러그인 열리고 싶지  않다면 옵션을 통해서 수정할 수 있는데 필자의 경우 아래와 같이 옵션을 설정하였다.

 

new BundleAnalyzerPlugin({

analyzerMode: 'static', /* 분석 파일 html 보고서를 dist 폴더에 저장한다 */

reportFilename: 'bundle-report.html', /* 분석 파일 보고서 이름은 아무거나 정하면 된다. */

openAnalyzer: false, /* 분석창을 실행시 열지 않는다 */

generateStatsFile: true, /* 분석 파일을 json 저장한다 . */

statsFilename: 'bundle-stats.json', /* 분석 파일 json 이름은 아무거나 정하면 된다. */

}),

 

 

자세한 설정 방법은 아래의 페이지 참조하면 된다.

https://www.npmjs.com/package/webpack-bundle-analyzer

 

필자와 같이 설정을 하게 되면 npm run start 실행 후에 dist / assets (사용자 설정마다 다를 수 있음) 폴더에 보면 'bundle-report.html' 파일과 'bundle-stats.json' 파일이  생성되었는데 이는 빌드되지 않고 분석된 보고서이다. 만약 빌드 후 분석된 보고서를 보고 싶다면 npm run build 이후에 생성된 보고서를 보면 번들링 되고 나서 용량이 줄여진 (minify 등 플러그인 설치가 되었다면) 보고서를 볼 수 있다. 간단하게 보고서를 보고 싶으면 html 파일을 열어서 브라우저에서 확인하면 된다.

 

다만 필자의  경우 package.json 에서 script 로 실행하여 빌든 이후 보고서를 보고 싶었다.

 

 

"scripts": {

"build:report": "webpack-bundle-analyzer --port 8888 dist/app-node-pl/assets/bundle-stats.json",

},

 

 

위와 같이 port 8888 기본값으로써, 미사용중인 포트 아무 포트를 쓰면 되며, 위에 저장했던 bundle-stats.json 파일을 불러오면 된다. 그러면 npm run build:report 스크립트를 실행하면 8888포트로 자동적으로 번들링된 (무조건 npm run build 실행 이후) webpack bundle analyzer  볼 수 있다. 물론 build:report 스크립트 명령어는 원하는데로 작성하면 된다.