SWC가 빠른 건 맞는데 왜 사이트에 나온 70배의 시간 차이가 나지 않는지 궁금해하는 글을 봤다. 이걸 이해하려면 두가지를 알아야한다. 하나는 SWC가 병렬 처리를 한다는 점이고 하나는 암달의 법칙이다.

병렬 처리

SWC는 병렬 처리를 하기 때문에 CPU 코어 개수가 늘어날 수록 성능이 좋아진다. 바벨보다 70배 빠른 건 4코어 머신 기준에서였다. 싱글 코어 성능은 한 20배 정도 된다는 소리고, 실제 성능 차이는 CPU 코어 개수에 거의 비례한다. 48 코어 빌드 머신을 쓰는 한 글로벌 대기업은 @swc/jest를 도입하고 288초 걸리던 테스트가 14초 걸리게 되었다고 하더라.

암달의 법칙

암달의 법칙은 간단하게 예시를 들어 설명하겠다.

어떤 앱을 빌드할 때, 웹팩이 40초, 바벨이 40초를 쓴다고 하자. SWC를 도입하면 웹팩이 40초, SWC가 0.5 ~ 1초 정도 쓰게 바뀐다. 그러면 80초 => 41초가 되는 것이다.

참고

next.js 가 소개한 5배의 시간 차이는 실제 Vercel 웹사이트 빌드 결과다. 병렬 처리 때문에 이는 페이지 개수에 영향을 받는다. 큰 앱일수록 SWC 모드와 바벨 모드의 성능 차이가 커진다.

8월 27일 업데이트

It's the end of hackweek @getsentry. I looked at replacing Babel with SWC from @kdy1dev + @vercel for building Sentry's large react frontend. SWC recently started publishing an emotion babel plugin for SWC which is super exciting. The results were interesting! pic.twitter.com/wo8gxFKVZD

— scott cooper (@scttcper) August 26, 2022