재택근무 환경에서 React 프로젝트 빌드 속도 개선

문제 상황

회사가 전면 재택근무로 전환되면서 개인 맥북으로 작업하게 되었다. 기존 회사 데스크톱(i7, 32GB)에서는 문제없던 프로젝트가 개인 맥북(i5, 16GB)에서는 cold build에 3분 이상 소요되었다.

적용한 해결책

1. thread-loader 적용

Webpack의 babel-loader 앞에 thread-loader를 추가했다.

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [
          'thread-loader',
          'babel-loader'
        ],
        exclude: /node_modules/
      }
    ]
  }
};

2. hard-source-webpack-plugin

중간 캐싱을 통해 rebuild 속도를 크게 개선했다.

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

plugins: [
  new HardSourceWebpackPlugin()
]

3. babel-loader cacheDirectory

{
  loader: 'babel-loader',
  options: {
    cacheDirectory: true,
    cacheCompression: false
  }
}

결과

• Cold build: 180s → 110s (39% 개선)
• Hot reload: 8s → 3s (62% 개선)

메모리 사용량은 소폭 증가했지만 개발 생산성 측면에서 충분히 감수할 만했다. 팀원들과 공유해서 재택 환경에서도 쾌적하게 작업할 수 있게 되었다.