Webpack Bundle Analizer

Webpack : 웹 어플리케이션을 구성하는 자원(HTML, CSS, Javascript, Images 등)을 모두 각각의 모듈로 보고 이를 Bundling하여 병합된 하나의 결과물을 만드는 도구

점점 프로젝트의 규모가 커지다 보면 빌드 시간을 잡아먹는 뚱뚱한 파일녀석이 생기게 됩니다.
이럴 때는 어떤 라이브러리 혹은 파일이 큰 용량을 잡아먹는 지 찾아야 합니다. 🧐

또한, 여러 라이브러리들을 설치하다가 각 모듈의 중복된 라이브러리를 포함하고 있으면 웹팩 성능 저하를 초래할 수 있습니다.

이런 번들링한 파일을 시각적으로 확인할 수 있다면 최적화를 좀 더 쉽게 할 수 있지 않을까? 하는 생각에 찾아본 결과 이러한 역할을 해주는 플러그인을 찾을 수 있었습니다.

Webpack Bundle Analyzer

Webpack을 사용하여 번들링되는 모듈을 분석하여 시각적으로 표현해주는 모듈입니다.
모듈이 차지하는 용량에 따라서 눈에 보이는 영역도 커지기 때문에 어떤 모듈이 얼만큼 용량이 사용되고 있는 지 직관적으로 알 수 있게 해줍니다.

우선 설치를 해보겠습니다.

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

프로젝트는 Vue/cli로 만들었기 때문에 vue.config.fs 파일에 아래와 같이 입력해줍니다.

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
       //기본값은 'Server'이며 보고서를 브라우저에 표시하기 위해 http서버를 실행시킨다는 것이다. 
       analyzerMode:
          "static" /* 분석 파일 html 보고서를 dist 폴더에 저장한다. */,
        reportFilename:
          "bundle-report.html" /*분석 파일 보고서 이름을 정한다. */,
        openAnalyzer: false /*분석창을 실행시 열지 않는다 */,
        generateStatsFile: true /* 분석 파일을 json 저장한다 */,
        statsFilename: "bundle-stats.json" /*분석 파일json이름을 정한다. */,
    })
  ]
}

이렇게 설정을 하고 웹팩 빌드를 하게 되면 html파일과 json파일이 생성되며 해당 파일들로 번들링된 결과를 시각적으로 확인할 수 있게 됩니다.

현재 제가 작업중인 프로젝트 입니다. 적용해본 결과 입니다.

초기 빌드 크기

한눈에 보기에 element-plus라는 라이브러리가 꽤나 큰 용량을 차지하고 있는 것을 확인할 수 있습니다.

사실 처음에 해당 라이브러리를 가져올 때 번들 크기를 신경쓰지 않았기에 main.ts에다가 전체 라이브러리를 가져오도록 했습니다.

import ElementPlus from 'element-plus'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mouont('#app')

이 부분을 제거하고 각 컴포넌트에서 불러오기를 하고 다시 build를 하였더니 눈에 띄게 확실히 용량이 줄은 것을 한 눈에 확인 할 수 있습니다.

이런식으로 어떤 라이브러리가 내 프로젝트에서 용량을 잡아먹고 있는 지 시각적으로 확인하고 그 라이브러리들의 최적화를 진행하여 번들 파일 크기를 줄일 수 있습니다.