[Vue.js] Vue-cli 와 webpack-bundle-analyzer

[Vue.js] Vue-cli 와 webpack-bundle-analyzer

---

 

👩‍💻 webpack-bundle-analyzer

webpack-bundle-analyzer는 웹팩을 통해 번들링되는 모듈의 크기를 시각적으로 보여준다.

번들 파일의 용량을 확인함으로써 번들 크기에 문제가 있는 번들을 확인하고 줄일 수 있도록 하여 속도 향상시킬 수 있도록 도움을 준다.

 

webpack-bundle-analyzer

 

 

⛏️ 설정하기

기본적으로 build 를 하게되면 자동으로 실행되며, pluginOptions.webpackBundleAnalyzer에 옵션을 추가할 수 있다.

// vue.config.js
pluginOptions: {
    webpackBundleAnalyzer: {
        // 이곳에 webpack-bundle-analyzer 옵션을 추가하면 된다.
        analyzerMode: "static"  // 결과를 파일로 저장
    }
},

파일은 기본적으로 dist/report.html 로 저장된다.

vue-cli-service build 옵션 중 --report 옵션을 사용하면 analyzerMode: "static" 옵션을 사용하지 않고도 결과를 파일로 저장할 수 있다.

$ npm run build --report

[참고: vue-cli-service-build] https://cli.vuejs.org/guide/cli-service.html#vue-cli-service-build

[참고: webpack-bundle-analyzer 옵션] https://github.com/webpack-contrib/webpack-bundle-analyzer#options-for-plugin

 

 

---

나는 analyzerMode를 disabled 하여 프로덕션 빌드시에는 분석을 실행하지 않고, build-report 옵션을 이용했을 때에만 실행하도록 설정해서 사용했다.

// package.json
{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:report": "vue-cli-service build --report"  // 추가
  },
}

$ npm run build:report