결과: Babel에서 SWC로 전환하고 번들을 정리해 빌드 시간을 235.81초에서 80.32초로 66% 줄였다. GitHub Actions 빌드는 약 6분에서 약 3분으로 줄었다.

문제 상황

  • 로컬 빌드에 약 4분, GitHub Actions 빌드에 약 6분이 걸렸다
  • 빌드가 CI/CD 파이프라인의 병목이 되었다

원인 분석

빌드 로그 확인 결과

info - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc"

주요 문제점:

  • .babelrc 파일로 인한 SWC 비활성화
  • 738MB 크기의 node_modules
  • 1MB 이상의 대용량 번들
  • 200개 이상 페이지의 SSR 설정

해결 과정

1. SWC 컴파일러 활성화

rm -f .babelrc

// next.config.js
const nextConfig = {
  // SWC 강제 활성화
  swcMinify: true,
  // 빌드 최적화
  experimental: {
    forceSwcTransforms: true,
  },
  // 컴파일러 최적화
  compiler: {
    removeConsole: process.env.NODE_ENV === "production",
  },
};

2. JSX 문법 오류 수정

  • SWC 전환 후 문법 오류 발견하여 수정
// 수정 전
<Box style={{ margin: "0px 20px" }}>-></Box>

// 수정 후
<Box style={{ margin: "0px 20px" }}>→</Box>

3. 번들 최적화

  • 웹팩 청크 분할 설정
webpack: (config, { dev }) => {
  if (!dev) {
    config.optimization = {
      ...config.optimization,
      splitChunks: {
        chunks: 'all',
        cacheGroups: {
          vendor: {
            test: /[\\\\\\\\/]node_modules[\\\\\\\\/]/,
            name: 'vendors',
            priority: 10,
          },
          mui: {
            test: /[\\\\\\\\/]node_modules[\\\\\\\\/]@material-ui[\\\\\\\\/]/,
            name: 'mui',
            priority: 20,
          },
        },
      },
    };
  }
}

ETC. 추가 개선사항

  • 번들 분석 도구 추가
npm install --save-dev @next/bundle-analyzer

지속적 모니터링을 위한 npm run analyze 명령어 지원.

요약

1. **SWC 컴파일러 활성화**
   - .babelrc 파일 제거
   - next.config.js에 forceSwcTransforms 적용
   - JSX 문법 오류 수정

2. **번들 최적화**
   - vendor/mui 청크 분리
   - 프로덕션 console.log 제거
   - 코드 스플리팅 개선

결과

개선 전

  • local build (약 4분 소요)

  • github action 내 build (약 6분 소요)

개선 후

  • local build (약 1분30초 소요)

  • github action 내 build (약 3분 소요)

분석

항목 개선 전 개선 후 개선 비율
총 빌드 시간 235.81초 80.32초 -66% (2.9배 빠름)
User Time 31.41초 18.13초 -42% 개선
CPU 사용률 241% 254% +5% 증가
총 CPU 시간 110.62초 38.63초 -65% 개선
컴파일러 Babel SWC -
번들 분석 미지원 지원 -