[Vue + typescript] 웹팩 용량 최적화하기

 

$ npm run stg

VUE.JS 목록

 

package.json

{
  ...
  "scripts": {
    "serve": "vue-cli-service serve",
    ...
    "stg": "vue-cli-service serve --mode production",
  },
  ...
}

 

production으로 빌드하면 아래와 같은 경고가 표시됩니다.

 warning

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  css/chunk-vendors.df6ebc30.css (323 KiB)
  js/chunk-vendors.15701ec8.js (840 KiB)

 warning

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  app (1.28 MiB)
      css/chunk-vendors.df6ebc30.css
      js/chunk-vendors.15701ec8.js
      css/app.fe3b303e.css
      js/app.19516ea3.js

asset과 entrypoint의 사이즈가 244 KiB가 넘지 않아야 하는데, 사이즈가 초과 되었습니다.

 

webpack-bundle-analyzer 로 사이즈 확인하기

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

vue.config.js

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

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

$ npm run stg

 

각 번들의 용량에 따라 크기가 표시됩니다.

lodash.js, moment.js (다국어) 에서 사이즈가 큰 것을 알 수 있습니다.

 

lodash.js 용량 줄이기

<template>
  ...
</template>

<script lang="ts">
import _ from 'lodash'

@Component
export default class ComponentView extends Vue {

  shuffle () {
    this.items = _.shuffle(this.items)
  }
}
</script>

위 코드를 아래와 같이 변경합니다.

<template>
  ...
</template>

<script lang="ts">
import { shuffle } from 'lodash/fp'

@Component
export default class ComponentView extends Vue {

  shuffle () {
    this.items = shuffle(this.items)
  }
}
</script>

lodash의 필요한 메서드만 import 합니다.

 

 

lodash.js가 531.35 KB에서 71.3 KB로 줄었습니다.

 

 

 

 

 

 

 

 

moment.js 용량 줄이기

vue.config.js

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

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

import moment from 'moment'

vue.config.js에서 moment alis 경로를 추가해주면

moment를 import 할때 날짜 메서드만 가져옵니다.

 

moment.js가 673.3 KB에서 84.57 KB로 줄었습니다.

 

 

 

VUE.JS 목록