이번에 새로운 개인 프로젝트를 시작하면서 얼마 전부터 눈여겨보던 Vite를 사용해보기로 결정했다. 짧게나마 사용해보면서 빌드 속도와 생산성 면에서 크게 만족해서 이 글을 작성하게 되었다. 그래서 제목은 Vite와 CRA이지만 Vite에 대해 중점적으로 적어보려고 한다.
글을 시작하기에 앞서, vite를 알아보며 유용했던 사이트를 소개하고자 한다.
영어로 된 공식문서를 전부 직접 읽을 수 있다면 좋겠지만.. 다른 개발자분들이 만들어놓으신 좋은 사이트가 있는데 참고하지 않을 이유가 없는 것 같아 해당 사이트를 공식문서와 번갈아 가며 읽었다.
-> https://vitejs-kr.github.io/
Vite란?
빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞추어 탄생한 빌드 도구이다.
즉, 개발자 경험을 향상시키는 정말 빠른 빌드 도구이다.
Vite 시작하기
# npm 6.x
$ npm create vite@latest [app name] --template [template name]
# npm 7+, '--'를 반드시 붙여주세요
$ npm create vite@latest [app name] -- --template [template name]
# ex) npm create vite@latest my-app -- --template react-ts
# yarn
$ yarn create vite [app name] --template [template name]
# pnpm
pnpm create vite [app name] --template [template name]Vite의 특징
Vite는 애플리케이션 내의 모듈을 두 개의 카테고리(Dependencies, Source code)로 나누어 개발 서버를 시작한다.
- Dependencies: 개발 시 바뀌지 않는 일반적인 JavaScript 소스 코드. (ex. node_modules 폴더에 있는 JavaScript 모듈)
esbuild를 이용해서 디펜던시를 ESM으로 변환한다.esbuild: Go로 작성된 JavaScript 빌드 도구로, 속도가 매우 빠르다.
예전에는 JavaScript에 사용할 도구는 JavaScript로 작성해야 한다고 생각했기에, 빠르지 않은 인터프리터 언어임에도 JavaScript를 사용해서 도구를 만들었다. (ex. Webpack) 하지만 시간이 지나며 다른 빠른 언어를 사용해서 JavaScript 도구를 만들고자 했고 이렇게 만들어진 것이 esbuild이다. - Source code: JSX, CSS, Vue/Svelte 컴포넌트처럼 컴파일링이 필요하고 수정이 잦은 JavaScript 소스 코드.
Native ESM을 이용해서 소스 코드를 제공한다.Native ESM: 브라우저에서 기본적으로 지원하는 모듈 기능이다.
브라우저는 모듈의 로딩을 최적화 할 수 있기 때문에 라이브러리를 사용하는 것보다 더 효율적이다.
따라서 Vite는 개발 시 수정사항이 생기면 관련된 부분만 교체하기 때문에 앱 사이즈가 갱신 시간에 영향을 주지 않으며 앱 사이즈에 상관 없이 속도가 빠르다. 하지만 CRA의 경우, 코드가 변경될 때마다 전체 앱을 다시 번들링한다. 따라서 코드가 변경될 때 페이지를 다시 로드하는 속도가 느리다는 단점이 있다.
Vite? CRA?
위에서 살펴보았듯 Vite는 코드 변경 시 페이지 로드 속도가 빠를뿐만 아니라 앱을 만드는 데에 걸리는 시간도 CRA보다 훨씬 짧다.
그럼에도 나는 지금껏 CRA를 사용해왔고, 많은 곳에서도 CRA를 사용하는 이유가 있다면 무엇일까?
- CRA는 React를 만든 페이스북에서 만든 도구이다. React 공식문서에서도 추천하는 툴체인일 정도로 인지도가 높다.
- 또한 속도는 esbuild보다 느릴지라도 훨씬 활성화된 생태계를 갖고 있는 Webpack을 사용한다.
- 따라서 CRA를 사용하는 게 더 안정적이라고 느낄 수 있다.
CRA의 이러한 장점에도 불구하고, 나는 앞으로 개인적인 프로젝트에서는 Vite를 사용할 것 같다.
선택에 대한 비용에 따라 속도를 포기하고 안정성을 택할 수도 있겠지만, 개인 프로젝트를 할 때는 다른 것보다 생산성이 중요하다고 생각하기 때문이다.
아무튼 앞으로 Vite가 더 많이 사용되기를 바래본다..
