Vite 프로젝트 SWC 도입

Intro

이번 Vite PoC가 성공적으로 끝나면서 babelrc (혹은 babel.config.js) 파일을 걷어냈고 프로젝트에서 바벨 설정을 따로 하고 있지 않고 Vite 플러그인에 모든 일들을 위임하고 있습니다. 이런 상황에서 babel을 걷어내고 SWC를 도입을 하면 어떨까라는 생각이 들었고, Vite의 훌륭한 생태계로 인해 플러그인을 교체해 주는 것만으로도 손쉽게 SWC가 도입이 가능하기에 PoC를 진행했습니다.

 

SWC

SWC란 Speedy Web Compiler의 약자로써 Rust로 작성된 웹 애플리케이션 컴파일러입니다. SWC는 최신 사양의 JavaScript 코드를 브라우저 호환성을 위해 이전 사양의 코드로 트랜스파일 하거나, TypeScript 코드를 JavaScript로 컴파일 해주는 등의 역할을 합니다.

 

기존의 도구인 Babel과 TypeScript에 내장된 컴파일러인 tsc는 TypeScript로 작성되어 있습니다. TypeScript로 작성된 두 도구는 Rust로 작성된 SWC와의 속도 차이가 나는 건 당연할 수 밖에 없다고 봅니다.

 

SWC 신뢰도

SWC는 이미 Next.js 12버전부터 공식 템플릿에 도입이 됐을 정도로 (babel 선택도 가능합니다.) 신뢰도가 높습니다. 아직 Babel에 비해서 생태계가 작긴 하지만 점점 확장되는 추세입니다.

 

여담으로 SWC 개발자는 한국인 강동윤 개발자님으로 알고 있습니다. 현재는 Vercel에서 일하고 계십니다.

 

Vite-SWC 도입

설치

pnpm install -D @vitejs/plugin-react-swc

설정 교체

// Before
import react from '@vitejs/plugin-react';

// After
import react from '@vitejs/plugin-react-swc';

export default defineConfig({
  plugins: [react()]
});

 

기대효과

SWC 공식 문서에서는 바벨보다 싱글 스레드인 경우 20배가 더 빠르며 4코어의 경우 70배가 더 빠르다고 나와 있습니다. 아래 블로그 글에는 바벨과 SWC의 벤치마크를 비교하고 있습니다.

 

Promise의 병렬 처리인 Promise.all에서 상당한 차이를 보여주고 있는데 프로젝트 내 Promise를 병렬로 처리하고 있는 부분이 있다면 성능 개선을 기대해 봐도 좋을 것 같습니다.

 

https://im-developer.tistory.com/230

 

사실 Vite 도입으로 인해 개발 서버 구동이 빨라졌지만 SWC를 도입하면 약간의 시간 단축이 있습니다. 기존 Vite 도입으로 인해 1분 14초에서 14초로 시간이 단축됐다면 SWC을 도입한다면 14초에서 10초로 단축이 됩니다. (로컬 기준이며 하드웨어 스펙에 따라 달라집니다.)

 

빠르면 빠를수록 좋으니..

 

여기서 궁금증이 생겼습니다.

 

SWC는 TypeScript도 컴파일을 해주는데 왜 Vite 프로젝트의 빌드를 수행할 땐 tsc를 사용해 타입 체크를 할까?

 

해답은 SWC 공식문서에 나와있습니다. Migrate from Tsc 라는 메뉴의 최하단에 나와있는 내용인데요, SWC는 코드를 트랜스파일만 하고 타입 체크는 수행하지 않는다고 합니다. 그러므로 어떤 타입 에러를 탐지하기 위해선 tsc를 사용하는걸 권고한다고 하네요.

 

빌드시 타입 체크는 TypeScript 내장 컴파일러인 tsc에게 위임하고 빌드 수행은 swc를 활용해 더 빠르게 트랜스파일을 수행하도록 합니다.