핵심 요약
더핑크퐁컴퍼니가 Next.js 9에서 12로 마이그레이션하고 리팩토링하여 번들 크기 및 빌드 속도를 크게 개선했습니다.
구현 방법
- Next.js 9→12 업그레이드 및 리팩토링
- Babel 제거 및 SWC 도입
- React 17 JSX Transform 도입
- 모듈러 임포트로 Lodash 최적화
- Moment.js 대체 Day.js/ date-fns 도입
- SWC 기반 빌드 플로우 및 번들 분석 도입(Analyzer)
주요 결과
- 로컬 핫 리로딩 3배, 프로덕션 빌드 5배 빠름
- 빌드 시간 40.40s → 21.00s로 단축
- 번들 크기 2.6MB → 2.01MB로 감소
- 번들 분석 도구 도입으로 시각화 및 최적화 포인트 확보
