Vite vs Snowpack

Snowpack과 Vite는 프런트엔드 빌드 툴이다. 이 둘 모두 개발 시 HMR을 기본적으로 지원하며, 이 때 Esbuild를 이용하여 빠른 속도로 빌드를 진행할 수 있다는 공통점이 있다.

다만 몇 가지 차이점이 있으며, 여기서는 간단하게 이 차이점을 소개하고자 한다. 그리고 이 내용을 근거로 만일 Snowpack을 사용하려 한다면 이보다 Vite를 고려해보는 것을 권한다.

Diff 1. Production Build 방식

Snowpack은 Build 시 기본적으로 번들링 과정을 진행하지 않는다.

이는 Snowpack 문서에도 명시되어 있는 사항이며, 각각의 JavaScript/CSS/HTML 파일을 빌드한 뒤 이를 번들링 및 최적화(minimize, mangling, tree-shaking, ...)를 수행하는 다른 도구(webpack, rollup, esbuild 등)를 이용해야 한다.

물론 Built-In(Esbuild) 및 Plugin(Rollup, Webpack) 방식으로 번들링을 할 수 있도록 공식적으로 지원하고는 있다. 그러나 Built-In 방식은 Production Build에 적용하기에는 아직 이르다 언급되는 Esbuild만을 지원하며, Plugin 방식 또한 사용자 수가 그리 많지 않고(4k downloads/week) 플러그인 모듈의 관리가 수 개월 째 이루어지지 않고 있기에 이 역시 실제 서비스 프로덕션에 적용하기에는 부적절하다 판단된다.

Vite는 Rollup을 기반으로만 번들링을 진행한다. 하나의 번들러만을 이용하기에 Snowpack 대비 더욱 많은 기능들을 Out-Of-The-Box로 제공할 수 있으며, 이슈 대응, 번들러 설정, 번들링 된 파일의 크기 모두 Snowpack 대비 우수하다. 물론 번들링 속도 또한 크게 뒤지지 않는 편.

Diff 2. Pre-Bundled Dependencies

Vite는 (로컬에서)개발 시 사용되는 디펜던시를 사전에 번들링한 뒤 캐싱한다. 이 덕분에 개발 서버를 재시작하더라도 디펜던시를 ‘다시' 번들링 할 필요가 없게 된다. 이는 개발 속도의 향상으로 이어진다.

Diff 3. First-Class Vue Support

처음 Vite는 Vue 툴링만을 타깃으로 나왔다. 물론 지금(Vite 2.0)은 프레임워크에 구애받지 않으나, 처음에는 그랬다. 다만 이러한 컨셉은 현재까지도 이어지고 있으며, 따라서 다른 빌드 툴보다 Vue만을 타깃으로 하는 여러 기능들을 기본적으로 제공하고 있다.

예를 하나 들어보자면, Vue SFC의 <script setup> 이 있다.


<script lang="ts" setup>
// ...
</script>

이러한 것들은 Vue만을 타깃으로 제공하는 기능이며, 이 덕분에 Vue 개발 시 Vite를 이용하는 것이 매우 매력적인 선택지가 될 수 있도록 해준다.

Conclusion

이내용이 부족하다 판단되면 Vite 문서를 참고할 수도 있다.

그리고 마지막으로, NPM Trends를 비교하자면 아래와 같다.