vue webpack build 속도 개선하기 최적화

General output time took 2 mins, 31.04 secs  

 SMP  ⏱  Loaders  
cache-loader, and  
thread-loader, and  
babel-loader took 1 min, 24.32 secs  
  module count = 391  
mini-css-extract-plugin, and  
css-loader, and  
postcss-loader, and  
sass-loader took 1 min, 18.69 secs  
  module count = 95  
css-loader, and  
postcss-loader, and  
sass-loader took 1 min, 18.66 secs  
  module count = 95  
vuetify-loader, and  
cache-loader, and  
vue-loader, and  
eslint-loader took 54.64 secs  
  module count = 60  
modules with no loaders took 53.64 secs  
  module count = 382  
cache-loader, and  
thread-loader, and  
babel-loader, and  
eslint-loader took 45.88 secs  
  module count = 12  
cache-loader, and  
thread-loader, and  
babel-loader, and  
vuetify-loader, and  
cache-loader, and  
vue-loader took 42.69 secs  
  module count = 32  
cache-loader, and  
vue-loader, and  
vuetify-loader, and  
cache-loader, and  
vue-loader took 23.97 secs  
  module count = 28  
mini-css-extract-plugin, and  
css-loader, and  
vue-loader, and  
postcss-loader, and  
vuetify-loader, and  
cache-loader, and  
vue-loader took 22.54 secs  
  module count = 20  
css-loader, and  
vue-loader, and  
postcss-loader, and  
vuetify-loader, and  
cache-loader, and  
vue-loader took 22.39 secs  
  module count = 20  
mini-css-extract-plugin, and  
css-loader, and  
postcss-loader took 12.76 secs  
  module count = 5  
css-loader, and  
postcss-loader took 9.86 secs  
  module count = 5  
url-loader took 0.541 secs  
  module count = 4  
html-webpack-plugin took 0.045 secs  
  module count = 1  
vue-loader, and  
cache-loader, and  
thread-loader, and  
babel-loader, and  
vuetify-loader, and  
cache-loader, and  
vue-loader, and  
eslint-loader, and  
eslint-loader took 0.033 secs  
  module count = 32  
vue-loader, and  
mini-css-extract-plugin, and  
css-loader, and  
postcss-loader, and  
vuetify-loader, and  
cache-loader, and  
vue-loader, and  
eslint-loader took 0.02 secs  
  module count = 20

빌드 시간 2분 31초,
아주 작은 수정에도 전체를 빌드하도록 되어있는데, 상당히 오버헤드가 큰 작업이다.

1. code split을 통해서 최적화 하는 방법
2. webpack에서 추천하는 build performance recommendation을 참고하는 방법
3. 캐시를 사용하는 방법 (https://webpack.js.org/guides/build-performance/)

이중 가장 간단하게 적용할 수 있는건 3번이다. 아래 패키지를 적용해주면 두번째 빌드부턴 매우 빨라진다.
내 경우 70%이상 빌드 성능 개선이 있었다. 추가로 1~2번도 적용하면 좋을듯하다.

https://github.com/mzgoddard/hard-source-webpack-plugin

vue.config를 쓰는 중이라면 아래 코드를 추가해주면된다.

const HardSourceWebpackPlugin = require("hard-source-webpack-plugin");
...

  chainWebpack: (config) => {
    ...
    config.plugin("HardSourceWebpackPlugin").use(HardSourceWebpackPlugin);
    ...
  }

위 코드 적용 후 내 경우 아래와 같이 성능 개선이 있었다.

 SMP  ⏱
General output time took 37.98 secs

 SMP  ⏱  Loaders
cache-loader, and
thread-loader, and
babel-loader, and
vuetify-loader, and
cache-loader, and
vue-loader took 7.74 secs
  module count = 1
vuetify-loader, and
cache-loader, and
vue-loader, and
eslint-loader took 3.89 secs
  module count = 2
mini-css-extract-plugin, and
css-loader, and
vue-loader, and
postcss-loader, and
vuetify-loader, and
cache-loader, and
vue-loader took 0.528 secs
  module count = 1
cache-loader, and
vue-loader, and
vuetify-loader, and
cache-loader, and
vue-loader took 0.325 secs
  module count = 1
css-loader, and
vue-loader, and
postcss-loader, and
vuetify-loader, and
cache-loader, and
vue-loader took 0.304 secs
  module count = 1
modules with no loaders took 0.011 secs
  module count = 1
vue-loader, and
mini-css-extract-plugin, and
css-loader, and
postcss-loader, and
vuetify-loader, and
cache-loader, and
vue-loader, and
eslint-loader took 0.002 secs
  module count = 1