Webpack 3 마이그레이션 후 빌드 속도 개선

문제 상황

프로젝트를 Webpack 2에서 3으로 업그레이드했는데, 빌드 시간이 35초에서 52초로 오히려 증가했다. Webpack 3의 Scope Hoisting 기능을 활성화했지만 예상과 달랐다.

원인 분석

Webpack 3의 ModuleConcatenationPlugin은 ES6 모듈에만 동작한다. 프로젝트 내 일부 라이브러리가 CommonJS로 작성되어 있어 효과가 제한적이었고, 오히려 분석 오버헤드만 증가했다.

또한 CommonsChunkPlugin 설정이 비효율적이었다. vendor와 manifest를 분리했지만, 자주 변경되는 코드와 그렇지 않은 코드가 섞여 캐싱 효율이 떨어졌다.

해결 방법

1. Scope Hoisting 조건부 적용

const plugins = [
  // 프로덕션 빌드에만 적용
  ...(process.env.NODE_ENV === 'production' 
    ? [new webpack.optimize.ModuleConcatenationPlugin()] 
    : []),
];

2. CommonsChunk 재구성

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
})

3. babel-loader 캐싱

{
  test: /\.js$/,
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true
    }
  },
  exclude: /node_modules/
}

결과

빌드 시간이 52초에서 28초로 단축되었다. 개발 모드에서는 Scope Hoisting을 비활성화하여 속도를 우선했고, 프로덕션에서는 번들 크기 최적화에 집중했다.

babel-loader의 캐싱이 가장 효과적이었다. 두 번째 빌드부터는 15초 내외로 완료된다.