Webpack 3로 마이그레이션하며 겪은 빌드 최적화

배경

회사 프로젝트의 빌드 시간이 느려지면서 Webpack 3 마이그레이션을 진행했다. 주요 목표는 번들 사이즈 감소와 빌드 속도 개선이었다.

Scope Hoisting 적용

Webpack 3의 가장 큰 변화는 Scope Hoisting이다. 기존에는 모듈마다 함수로 감싸졌는데, 이제 가능한 경우 하나의 스코프로 합쳐진다.

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.optimize.ModuleConcatenationPlugin()
  ]
};

이것만으로 번들 사이즈가 12% 정도 줄었다.

CommonsChunkPlugin 재설정

벤더 번들 분리 전략도 수정했다.

plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    minChunks: function(module) {
      return module.context && module.context.includes('node_modules');
    }
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'manifest',
    minChunks: Infinity
  })
]

manifest 청크를 별도로 분리해 vendor 파일의 해시가 코드 변경마다 바뀌는 문제를 해결했다.

UglifyJS 옵션 조정

프로덕션 빌드에서 UglifyJS 옵션을 더 공격적으로 설정했다.

new webpack.optimize.UglifyJsPlugin({
  compress: {
    warnings: false,
    drop_console: true,
    collapse_vars: true,
    reduce_vars: true
  },
  sourceMap: true
})

결과

• 번들 사이즈: 1.2MB → 1.02MB (약 15% 감소)
• 빌드 시간: 42초 → 38초
• 브라우저 파싱 시간도 체감상 개선됨

마이그레이션 자체는 breaking change가 거의 없어서 반나절 만에 완료했다. Scope Hoisting의 효과가 생각보다 좋았다.