Babel, SWC
들어가기에 앞서
기존에 사용하던 react.js의 경우 Babel을 이용하여 컴파일을 하였습니다. 하지만 Next.js의 경우 SWC 가 기본으로 탑재되어있는데요. Next.js를 공부를 시작하면서 Babel과 SWC 의 차이점을 정리합니다.
Babel
Babel 은 자바스크립트의 컴파일러입니다. 하는 역할로는 최신 Ecama Script 문법을 구형 버전으로 바꿔주는 역할을 하고 최적화 또한 해줍니다. 자바스크립트는 문제가 많은 언어입니다. 만든 기간은 2주일도 안되어서 세상에 급하게 나왔습니다. 때문에 버그들도 많고 개선해야 할 것들이 많습니다. 때문에 기술의 변화가 굉장히 빠르기 때문에 최신 브라우저조차 지원하지 못하는 문법과 기술들이 출현하고 있습니다.
이러한 상황으로인해 웹 개발자라면 옛날 브라우저를 사용하는 사용자들도 고려를 해야합니다. 이때 바벨은 새로운 문법이나 타입스크립트 혹은 JSX같이 다른 언어들에 대해서도 Ecma Script로 동작할 수 있도록 하위버전의 자바스크립트로 변환을 해줍니다.
바벨의 동작은 다음과 같습니다.
- 파싱 (parsing) : 코드를 읽고 추상 구문 트리(AST)로 변환하는 단계
- 출력 (printing) : 변경된 결과물을 출력하는 단계
파싱과정을 통해 고수준의 인간의 언어에서 저수준의 기계어로 변환을 합니다. 바벨은 자바스크립트 코드를 받아 AST를 만듭니다. 그리고 이것을 활용하여 새로운 자바스크립트 코드를 출력합니다.
SWC (Speedy Web Compiler)
SWC 는 자바스크립트 프로젝트의 컴파일과 번들링 모두에 사용할 수 있는, Rust라는 언어로 제작된 빌드 툴입니다. SWC는 Speedy Web Compoiler의 약자로, 말 그대로 매우 빠른 웹 컴파일러의 기능을 제공하는 툴입니다.
하지만 실제로는 컴파일의 기능만을 제공하는 것은 아닙니다. 웹팩과 같이 자바스크립트의 기능도 제공하려고 개발을 하고 있습니다. 얼마든지 기능 확장이 가능하도록 설계되어 있기 때문에, 단순한 컴파일러가 아닌 하나의 플랫폼으로 보는 것이 적절할 것 같습니다.
SWC 프로젝트의 목표는 다음과 같습니다. 개발자이신 강동윤님의 말을 따르면 느린 웹 빌드 툴 전체를 러스트로 다시 구현하는 것 이기 때문에 앞으로도 SWC의 기능은 추가될 것으로 보입니다.
SWC의 기능은 무엇일까요?
SWC의 기능은 다음과 같습니다.
- 변환 transform : babel을 대체하기 위해서 사용합니다. 멀티스레드를 지원하며 비동기적으로 진행이 됩니다.
- 축소 minify : terser을 대체하기 위해서 사용합니다. 멀티스레드를 지원하며 terser보다 높은 압축률을 보여줍니다. (3~10배 정도 빠릅니다. 더 빨라질 수 있습니다.)
terser는 번들링하는 파일들을 작게 해줘서 번들링된 파일의 크기를 줄여주는 역할을 합니다. Terser는 파일 크기를 작게 해주는 과정에서 불필요한 주석과 console.log 등 개발자 확인용의 코드를 제거해주는 역할
🧐SWC가 빠른 이유가 무엇일까요?
Next.js에서 SWC를 기반으로 개발한 컴파일러를 통해 활용하던 바벨을 대체하였습니다. SWC로 교체함으로써 트랜스파일링은 17배나 빨라지는 성과를 가져왔습니다. 왜 이렇게 빨라진 것일까요?
기존에 사용하는 자바스크립트는 이벤트 루프 기반의 싱글 스레드를 사용합니다. 하나의 일 밖에 못하는 것입니다. 하지만 SWC 언어는 Rust 프로그래밍 언어는 병렬 처리를 고려하여 설계된 언어이기 때문에 멀티 스레드를 사용이 가능합니다. 여러 일을 동시에 할 수 있습니다.
싱글 스레드, 멀티 스레드 차이때문에 속도가 빠른거다? 그뿐만이 아닙니다. 싱글 스레드 환경에서도 SWC가 바벨보다 20배가 더 빠르다는 벤치마크의 결과도 있습니다.
다양한 환경에서의 테스트 결과도 다음과 같았습니다.
위의 테스트 결과들을 종합해 봤을 때, 빌드 시 SWC를 사용하면 바벨를 사용할 때보다 빌드 속도가 향상되며, 향상되는 정도는 프로젝트의 규모와 빌드 환경에 따라 달라진다라는 결론을 얻을 수 있었습니다.
참고자료
