Vue.js Bundle 최적화

Vue.js 프로젝트의 빌드 시간 및 번들 크기를 줄이기 위한 방법.
정리한 내용의 대부분은 아래 주소에서 가져왔다.

https://ui.toast.com/weekly-pick/ko_20190603

Sourcemap 제거하기

Vue 프로젝트 빌드 시 생성되는 dist/js/ 하위에는 .map 확장자의 sourcemap 파일이 생성된다.
이 파일은 디버깅 시 추적을 하기 위해 생성하는 파일이다. 파일 크기가 커서 production 배포 시 제거해주면 좋다.

// vue.config.js

module.exports = {

  productionSourceMap: false,
  
}

• 적용 전
  

• 적용 후
  

실제로 적용 후 빌드시간이 줄어드는 것을 확인하기 위해 package.json 의 build 스크립트에서 시간을 찍었다.

// package.json

"scripts": {

  "build": "date +%s; vue-cli-service build; date +%s;",

}

실제 내가 작업한 프로젝트 적용 시 빌드시간이 23초에서 15초로 줄어듦을 확인할 수 있었다.

Bundle 분석하기

webpack 의 번들 분석 플러그인 webpack-bundle-loader 를 설치하여 분석한다.

npm i --save-dev webpack-bundle-analyzer

해당 플러그인은 번들 크기를 시작적으로 보여준다. 설치 후 vue.config.js 에 등록 해주면 된다.

// vue.config.js

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

module.exports = {

    configureWebpack: {
        plugins: [new BundleAnalyzerPlugin()]
    }
    
};

설정 후 빌드를 수행하면 현재 만들어진 번들의 크기를 분석할 수 있다.
npm run build

빌드 시 아래와 같이 사용하는 모듈을 크기별로 알 수 있다.

안쓰는 모듈 제거하기

안쓰는 모듈을 제거하는 것은 번들의 크기를 줄이는 가장 기본적이고 효과적인 일이다.

moment.js

위 그림을 기준으로 봤을 때 moment.js 가 가장 큰 크기를 차지한다. 이유는 전세계 locale 정보를 담고 있어서인데, 시간 국제화가 필요없고 시간 계산만 하는 용도로 사용한다면 locale 을 제거한 moment.js 만 사용하자.

// vue.config.js
module.exports = {
  
  configureWebpack: {
    plugins: [new BundleAnalyzerPlugin()],
    resolve: {
      alias: {
        moment: 'moment/src/moment'
      }
    }
  }
  
};

위 설정을 통해 moment 를 import 하는 애들은 다 moment/src/moment 만 import 해 사용하는 형태가 된다.

moment 모듈의 크기가 많이 줄어든 것을 확인할 수 있다.

Vuetify

webpack4 이전의 구버전 Vuetify 는 직접 또는 vuetify-loader 를 사용하여 사용하는 컴포넌트만 담아(a la carte) 빌드했었다.
하지만, vue-cli 의 플러그인을 통해 Vuetify 프로젝트를 구성한 경우 TreeShaking이 자동으로 활성화 되어 따로 필요한 설정이 없다.
https://vuetifyjs.com/en/features/treeshaking/