webpack-bundle-analyzer란?

오늘은 저희 프로젝트가 빌드 시간이 굉장히 오래 걸려서 해결방법을 찾다가 도입해볼까 고민하게 된 

webpack-bundle-analyzer를 소개해보려고 합니다

---

webpack-bundle-analyzer가 무엇일까

webpack-bundle-analyzer란 웹팩으로 빌드를 할 때 최종 결과물이 어떻게 번들 됐는지 시각적으로 보여주는 도구입니다

프로젝트의 JS 번들 크기, 어떤 라이브러리가 얼마나 차지 하는지 그래프로 예쁘게 시작적으로 보여준다고 합니다

크기를 보면서 너무 큰 공간을 차지하는 것을 제거하여서 최적화할 수 있습니다

 

대표적으로 큰 라이브러리 몇가지를 말하자면

Three.js, TensorFlow.js, Chart.js, moment.js, lodash.js 등등이 있다고 합니다

---

사용하기

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

yarn add -D webpack-bundle-analyzer # yarn

이렇게 먼저 설치를 진행해줍니다

// webpack.config.js

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

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ],
};

webpack.config.js 파일을 생성해서 기본적으로 이렇게 넣어주고 다른 설정을 추가 가능합니다

 

yarn build # yarn

npx webpack --mode production # npm

이런 식으로 확인 가능합니다

---

글을 마치며

오늘은 이렇게 최적화 방법들을 살펴보다가 알게된 webpack-bundle-analyzer에 대해서 알아보았습니다

꼭 한 번 제대로 사용해서 엄청나게 번들 크기를 줄일 수 있게 되었으면 좋겠습니다

밑에 문서를 추가로 참고하시면 좋을거 같습니다!!

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

webpack-bundle-analyzer