[Vue.js] chunk-venders.js 용량 줄이기 및 속도 개선

Vue.js 로 개발 후 운영 중인 사이트에 문제가 생겼다.

Vue.js 는 처음에 모든 리소스를 한번에 받아오는게 문제였다. 그 모든 것이 압축된 파일인

chunk-vendors.js 파일의 크기가 작을때는 문제가 없지만, 어느새 12.3MB 까지 불어난 탓에

인터넷 속도가 느린 나라에서는 처음에 화면을 불러오는데 너무 많은 시간이 걸린다고 한다.

처음에는 lazy-loading 으로 컴포넌트 단위로 분리를 시켜보았지만,

차이가 미미 했다.

이 밖에도 이미지 사이즈 줄이기 등 다양한 방법이 있지만

구글링을 통해 chunk-vendors.js 을 일정한 크기로 쪼개는 방법을 찾았다.

// vue.config.js 파일
 configureWebpack:{
    mode: 'development',
    devtool: false,
    optimization: {
      splitChunks: {
        chunks: 'all',
        minSize: 15000,
        maxSize: 250000,
        maxAsyncRequests: 30,
        maxInitialRequests: 30,
        enforceSizeThreshold: 50000,
      },
    },
  }

이 코드를 추가 후 npm run serve 로 재시작 하면

chunk-vendors.js 가 하나의 큰 파일에서 많은 작은 파일로 쪼개진 것을 볼 수 있다.
실제로 로딩 속도 개선에 도움이 되는지 테스트를 해야겠다.

참조
Slash Your Load Times: Shrink the Chunk-Vendors.js Size in Vue3
[webpack4] splitChunksPlugin 옵션 파헤치기