Next.js 빌드 최적화 : Babel → SWC 전환

문제 상황

• 프로젝트 빌드 시간이 1분 30초를 초과
• 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	-
번들 분석	미지원	지원	-