Next.js 11 vs 12 컴파일러 비교

이번 next.js 12버전 업데이트에서 Babel 컴파일러에서 SWC(Rust) 컴파일러로 바뀌었다.

TL;DR

refresh, build 시간 비교

• build time
  • 11버전 : 1분 50초(빌드에 걸리는 총 시간)
  • 12버전 : 1분 38초(빌드에 걸리는 총 시간)
• refresh time
  • 11버전 : 강의 만들기 -> 강의 정보 : 5.41초
  • 12버전 : 강의 만들기 -> 강의 정보 : 3.16초

Refresh 시간 비교

강의 만들기 페이지 -> 강의 정보 페이지

• 11버전 : 강의 만들기 -> 강의 정보 : 5.41초

• 12버전 : 강의 만들기 -> 강의 정보 : 3.16초

  캐시때문에 페이지 이동시간을 비교해서 측정했다.
  생각보다 유의미한 차이를 보여주었다.
  next.js는 개발모드일 때 페이지 이동 시 매번 동적으로 페이지를 새로 만드는데 이때 컴파일러가 달라져서 속도가 빨리진 것이 체감이 되었다.

Build 시간 비교

버전 11

버전 12

• 11버전 : 1분 50초(빌드에 걸리는 총 시간)
• 12버전 : 1분 38초(빌드에 걸리는 총 시간)
• 빌드에 포함된 항목
  • 타입체크
  • ESLint 에러 확인
  • 컴파일
  • 정적 페이지 생성

고찰

공식홈페이지나 유튜브로 홍보했던 것 처럼 드라마틱하게 3배 또는 5배까지 빨라지진 않았다.
컴파일이나 정적 페이지 생성에선 빨라진 것 같은데 타입체크나 ESLint 에러 확인 하는 부분은 별 차이가 없는 것 같았다.
시간측정을 손으로 스탑워치를 들고 측정한 것이기 때문에 정확하지 않을 수도 있다.