인수인계 받은 프로젝트에서는 vite를 사용하고 있다.
항상 CRA만 사용해 온 나에게 Vite는 처음 듣는 생소한 내용이었는데,,, 개발하던 중 이에 대해서 짚고 넘어가기 위해서 Vite에 대해 간단히 알아보고자 한다!
📌 Vite란?
공식문서에 따르면 Vite라는 말은 프랑스어로 "빠르다" 를 의미한다고 한다.
Vite는 빠르고 간결한 모던 웹 프로젝트 빌드 도구이다.
- 개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공한다.
- 번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있다. 이는 높은 수준으로 최적화된 정적 리소스들을 배포할 수 있게 해주고 미리 정의된 설정을 제공한다.
Vite가 지원하는 템플릿
- vanillaJS
- VueJS
- ReactJS
- preact
- lit
- Svelte
💡CRA vs Vite
지금까지 잘 사용해 온 CRA말고 Vite를 사용하는 이유는 뭘까!
우선 CRA는 js코드로 구성된 툴인 Webpack을 사용한다. js는 기본적으로 인터프리터 언어이기 때문에 좀 느린 편에 속하는데 코드의 양이 적다면 모르지만 코드의 양이 많아진다면 속도가 느려지는게 체감이 될 것이다.
이러한 단점을 해결하기 위해서 Esbuild를 기반으로 만들어진 빌드툴인 Vite를 사용하는 것!
Esbuild: Go언어로 작성된 JavaScript빌드툴로 속도가 빠르다!
+ Vite를 사용해야 하는 이유
기존에 CRA를 사용했을 때는 소스 코드를 업데이트 하게 되면 번들링 과정을 다시 거쳐야 했다. 따라서 서비스가 커질수록 소스 코드 갱신 시간이 증가했던 것이다. 따라서 모든 파일을 번들링하고 다시 웹페이지에 불러오는 것은 매우 비효율적이다. 이러한 이슈를 우회하기 위해서 HMR(Hot Module Replacement)라는 대안이 나왔지만 명확한 해답은 아니었다고 한다.
💡 ESM
ESM이란 EcmaScript Modules로 ES6에서 도입되었으며 import/export를 사용해 모듈을 동적으로 로드할 수 있는 모듈 시스템이다.
💡 Hot Module Replacement
vite는 기본적으로 ESM을 통해 HMR API를 제공한다. HMR기능이 있는 프레임워크는 API를 활용해 페이지를 다시 로드하거나 애플리케이션 상태를 날려버리지 않고 즉각적이고 정확한 업데이트를 제공할 수 있다.
vite는 HMR을 지원하긴 하나 번들러가 아닌 ESM을 이용하는 것이다. 웹팩은 모든 소스코드가 빌드되어 한번에 번들링된 형태로 서비스를 제공했다면 네이티브 ESM 기반의 Vite는 어떤 모듈이 수정되면 수정된 모듈과 관련된 부분들을 교체하고 브라우저에서 해당 모듈을 요청하면 교체된 모듈을 import할 때 전달하는 것이다. 전 과정에서 ESM을 이용하기에 앱 사이즈가 커져도 갱신 시간에는 영향을 끼치지 않는 것이다.
또한 vite는 HTTP헤더를 활용해 전체 페이지의 로드 속도를 높인다고 한다.
📌 Vite 설치
각자 사용하는 패키지 매니저에 따라서 아래와 같이 설치해주면 된다.
npm create vite@latest
yarn create vite
⚠️ 주의
- vite를 사용하기 위해서는 호환성 문제 때문에 Vite는 버전 14.18+ or 16+의 Node.js를 요구한다. 일부 템플릿의 경우 더 높은 버전의 Node.js를 요구할 수도 있으니 버전에 주의하자!
프로젝트의 이름이나 템플릿을 지정해서 프로젝트를 만들 수도 있다.
# npm 6.x
npm create vite@latest my-vue-app --template react-ts
# npm 7+, '--'를 반드시 붙여주세요
npm create vite@latest my-vue-app -- --template vue
# yarn
yarn create vite my-vue-app --template react위처럼 자신이 원하는 기술과 패키지 매니저에 따라서 명령어를 입력해주면 끝!
🖥️ Vite 시작하기
vite가 설치된 프로젝트는 vite명령어를 통해서 바로 실행할 수 있다.
기본적으로 Vite에서 제공하는 npm 스크립트는 다음과 같다
{
"scripts": {
"dev": "vite", // 개발 서버를 실행합니다. (`vite dev` 또는 `vite serve`로도 시작이 가능합니다.)
"build": "vite build", // 배포용 빌드 작업을 수행합니다.
"preview": "vite preview" // 로컬에서 배포용 빌드에 대한 프리뷰 서버를 실행합니다.
}
}yarn을 사용한다면 이렇게 해주면 끝!
yarn dev or yarn vite //개발 서버 실행위의 과정을 거친다면 기본적인 프로젝트 생성은 끝이다.
이후에는 필요에 따라서 패키지나 의존성 등등 각자에 맞춰서 개발을 시작해주면 된다!
지금까지 간단해서 아무생각 없이 CRA를 사용해왔는데 이보다 효율적인 빌드 도구가 있는 줄 몰랐다.
앞으로는 vite를 적극 활용해 봐야겠다.
오늘의 포스팅 끝!
