2023년 2월 16일

프로젝트의 규모가 커지면 커질수록 개발 환경에서 프로덕트 환경으로 전환할 때 많은 시간이 소요됩니다. 프로젝트를 배포하기 위해 작은 버그 하나 고치고 빌드하고 테스트 후 빌드… 이 과정이 반복된다고 했을 때, 빌드 시마다 많은 시간을 잡아먹는 것은 작업을 하는 데에 있어서 굉장한 시간낭비라고 생각할 지도 모릅니다. 그래서 많은 웹 개발자들은 빌드 시간을 단축시킬 방법을 찾기 시작했습니다.

웹팩(Webpack)

웹팩은 자바스크립트 모듈 번들러입니다. 각 모듈을 정의 및 로딩하고 하나의 엔트리 파일을 포함해 컴파일 과정을 거칩니다. 컴파일되면 번들 파일이 하나 생성되고 이 번들 파일은 브라우저가 이해할 수 있는 파일입니다. 아래 이미지가 이해하기 쉽게 설명하고 있습니다.

[출처] https://ithub.tistory.com/166

바벨(Babel)과 SWC(Speedy Web Compiler)

바벨은 Javascript Transpiler로, 프로그래밍 언어를 변환하는 Compiler의 하위 분류에 속하는 소프트웨어입니다. 즉, 언어를 변환해주는 기능을 제공하는 소프트웨어의 컴파일러와 동일하나 유사한 두 언어 사이의 변환을 거치는 소프트웨어입니다. 브라우저는 최신 버전의 자바스크립트 문법을 이해하지 못하는데, 바벨이 브라우저가 이해할 수 있는 문법으로 변환하는 역할을 담당합니다.

사실 바벨은 웹팩과 바벨이 항상 함께 붙어다니기 때문에 많이 들어보았을 건데 SWC는 생소합니다. 여기서 SWC는 Next.js 12 버전부터 정식으로 도입되었고 빌드 속도가 빠른 특징을 가진 트랜스파일러이자 컴파일러 혹은 조금 더 확장된 기능을 제공하므로 하나의 플랫폼이라고 할 수 있습니다. SWC로 구축된 컴파일러를 이용하여 해당 프로젝트를 빌드할 때 빌드 시간을 최대 5배 정도 감축시킬 수 있다고 합니다.

SWC가 왜 바벨보다 빠를까요?

자바스크립트는 싱글 스레드 언어입니다. 바벨은 자바스크립트 트랜스파일러인데 이 말은 즉슨, 한 번에 최대 하나의 일 밖에 처리하지 못한다는 것입니다. 하지만 SWC는 Rust 프로그래밍 언어를 기반으로 탄생한 빌드 툴이며 작업이 병렬적으로 이루어질 수 있습니다. 병렬적으로 일을 처리하면 아무래도 한 가지의 일만 처리하는 것보다 훨씬 빠르다는 건 충분히 이해할 수 있을 것입니다. (병렬 처리를 하지 않는 싱글 스레드 환경에서도 바벨보다 빌드 속도가 빠르다고 합니다. 다음 시간에…)

Webpack + Babel VS Webpack + SWC

…

Babel로 구축한 환경을 SWC로 마이그레이션 하기