재택근무 환경에서 React 프로젝트 빌드 시간 개선하기

문제 상황

3월부터 시작된 재택근무로 개인 PC(Windows)에서 개발하게 되었다. 기존 회사 맥북에서는 30초 정도였던 프로덕션 빌드가 1분 30초까지 늘어났다. HMR도 5초 이상 걸려 개발 경험이 크게 저하되었다.

적용한 최적화

1. babel-loader 캐싱

{
  test: /\.(js|jsx)$/,
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      cacheCompression: false
    }
  }
}

2. thread-loader 적용

CPU 코어를 최대한 활용하기 위해 worker pool을 추가했다.

use: [
  'thread-loader',
  'babel-loader'
]

3. TerserPlugin 병렬 처리

optimization: {
  minimizer: [
    new TerserPlugin({
      parallel: true,
      terserOptions: {
        parse: { ecma: 8 },
        compress: { ecma: 5 }
      }
    })
  ]
}

4. source-map 변경

개발 환경에서 eval-source-map을 eval-cheap-module-source-map으로 변경했다. 디버깅에는 큰 지장이 없었다.

결과

• 프로덕션 빌드: 1분 30초 → 45초
• HMR: 5초 → 2초
• 초기 빌드: 1분 → 40초

완벽하게 회사 맥북 수준은 아니지만 충분히 개발 가능한 수준이 되었다. Windows 환경의 파일 시스템 특성상 한계는 있지만, webpack 설정만으로도 상당한 개선이 가능했다.

참고

• webpack 공식 문서의 Build Performance 섹션이 도움이 되었다
• node_modules까지 캐싱하는 hard-source-webpack-plugin도 고려했지만, 간헐적인 캐시 오류 이슈로 보류했다