개요

빠른 개발 서버 실행과 HMR(Hot Module Replacement) 기능을 통해 개발 생산성 향상을 도와주는 빌드 도구 Vite . 빠르게 동작하는 특징은 좋지만 TypeScript 프로젝트를 진행하면서 타입 검사를 해주지 않아 아쉬운 생각이 들었는데요. 왜 타입 검사를 진행하지 않는지 알아보기 위해 Vite의 구성과 특징에 대해 알아보았습니다.

Vite의 구성

Vite는 내부적으로 Esbuild 와 Rollup 을 사용하여 코드에 필요한 변환과 번들링 작업을 수행합니다. 인터넷 상에 Vite는 개발 서버에서 Esbuild를 사용하고, 빌드 시점에 Rollup을 사용한다는 정보가 많은데요. 완전히 틀린 표현은 아니지만 정확하게는 “트랜스파일링에 Esbuild가 사용되고 번들링에는 Rollup이 사용된다.”는 표현이 맞을 것 같습니다.

왜냐하면 TypeScript로 작성한 코드가 브라우저에서 실행되기 위해서는 JavaScript로 변환되어야 하는데, 코드가 개발 서버를 통해 서빙되거나 빌드 결과물을 만들 때 모두 해당되는 일이기 때문이죠. Jsx 또한 마찬가지로 브라우저가 실행할 수 있도록 순수한 JavaScript로 변환이 필요합니다. 빌드 시점에는 이러한 변환이 일어난 뒤 Rollup을 통해 청크 단위로 번들링하게 됩니다.

이외에도 Esbuild는 개발 서버가 처음 실행될 때 프로젝트 의존성(node_modules)이 브라우저에서 바로 실행 가능하도록 ESM 형식으로 변환하는 작업을 수행하고, 빌드 과정에서는 번들링이 완료된 이후에 코드를 최소화(Minify)할 때에도 사용됩니다.

결론적으로 Esbuild는 개발 서버에서만 사용되는 것은 아닙니다. 아래는 Vite에서 사용되는 두 도구의 사용성에 대해 정리한 테이블입니다.

그렇다면 Vite는 Esbuild를 통해 타입 검사를 수행할 수 없는걸까요?

Esbuild의 특징

Esbuild는 Go 언어로 개발되어 동시성 처리에 상당한 이점을 갖습니다. 공식문서에 따르면 Babel과 같은 기존의 트랜스파일러 대비 10배에서 100배까지 빠른 밴치마크 성능을 보인다고 합니다.

Note

Go 언어는 고루틴(Goroutine)이라고하는 작은 단위로 코드를 실행하며 고 스케쥴러(Go Scheduler)를 통해 실행 가능한 CPU 코어에 고루틴 할당할 수 있는 기능을 제공합니다. 이로써 동시성과 병렬성을 모두 활용한 빠른 실행이 가능하다는 특징이 있습니다.

Esbuild는 이러한 언어적인 특징과 더불어 트랜스파일러가 전반적으로 갖는 특징이 있습니다.

트랜스파일러는 성능적인 이점을 갖기 위해서 파일 단위의 변환을 진행합니다. 전체 프로젝트를 한번에 변환하는 것이 아니라 파일을 하나씩 변환하는 것이죠. 이러한 동작을 하는 이유는, 프로젝트 전체 파일간의 구조와 의존 관계를 파악하고 그에 대한 작업을 수행하는 것은 꽤나 리소스가 들어가는 작업이기 때문입니다. Esbuild 뿐만 아니라 Babel, SWC와 같은 트랜스파일러는 원래 JavaScript 변환이 주 목적이였던 만큼, 타입 검사라는 작업은 이들의 관심사에 맞지 않는 기능으로 판단한 것으로 보입니다.

Tip

Esbuild가 타입 검사를 하지 않는 이유는 TypeScript Caveats 섹션을 통해서 더 자세하게 확인해볼 수 있습니다.

결과적으로는 Esbuild를 통해서는 타입 검사가 불가능한 것 같네요. 그럼 빌드 시점에 타입 검사를 진행하면 어떨까요?

Vite에서 Rollup의 역할

Rollup은 실제로 번들링 과정에서 전체 프로젝트의 의존 그래프를 분석하는 과정을 거칩니다. 그렇기 때문에 빌드 시점에 동작하도록 Rollup Plugin을 구성하고 tsc를 통해 타입 검사를 실행하거나, @rollup/plugin-typescript 같은 플러그인을 사용한다면 타입 검사를 수행할 수 있어보입니다.

하지만 Vite는 Rollup을 타입 검사 도구로 사용하지 않습니다.

그 이유로는 Vite의 공식 문서에서 설명하는 컨셉에서 추측해볼 수 있습니다. Vite는 빠른 개발 서버, HMR, 빠른 빌드를 강조하고 있습니다. 타입 검사를 위해 빌드에 걸리는 시간이 늘어난다면 앞서 강조한 내용들의 의미가 줄어들게 되죠.

정리

Vite는 개발, 빌드, 타입 검사 각각에 대한 관심사를 성능적인 목표를 위해 철저히 분리하였습니다.

Vite 문서의 TypeScript 섹션 에서도 타입 검사를 위해 외부 도구를 사용할 것을 권장하고 있습니다. 이를 통해서 Vite에서는 타입 검사가 자체적으로 포함되지 않기를 바라고 있다는 인상을 받았습니다. 마치 “타입 검사는 느리니까 이건 우리 영역 바깥의 일이야.” 라고 말하는 것 같이요.

미래에 타입 검사가 획기적으로 빨라지게 된다면 Vite에 포함될 수도 있겠다는 생각이 들었습니다. :D