요즘 많은 빌드 도구들 중에 Vite를 많이 사용한다고 들었습니다.
Vite 공식 사이트
이 곳에 보면 기존의 다른 번들링 도구들은 파일이 늘어나거나 개발을 진행할 때 소스코드를 업데이트 하게 되면 할 때마다 번들링 과정이 진행된다고 되어있습니다.
따라서 서비스가 커질수록 소스 코드 갱신 시간 또한 증가하게 되겠죠?
그러나 Vite는 ESM을 이용하기에 더욱 시간이 빨라집니다. 어떤 모듈이 수정되면 vite는 그저 수정된 모듈과 관련된 부분만을 교체할 뿐이고, 브라우저에서 해당 모듈을 요청하면 교체된 모듈을 전달할 뿐입니다. 전 과정에서 완벽하게 ESM을 이용하기에, 앱 사이즈가 커져도 갱신 시간에는 영향을 끼치지 않습니다.
저는 React를 사용하여 Vite를 이용해 볼건데요
현재 지원하고 있는 템플릿은 다음과 같습니다:
| Javascript | Typescript |
|---|---|
| vanilla | vanilla-ts |
| vue | vue-ts |
| react | react-ts |
| preact | preact-ts |
| lit | lit-ts |
| svelte | svelte-ts |
| solid | solid-ts |
| qwik | qwik-ts |
먼저 Vite 프로젝트를 만들기 위해서는 Vite를 설치해야합니다
npm create vite@latest위의 코드를 실행하면 밑의 결과와 같이 project 이름을 설정하는 곳이 나옵니다
이곳에 원하는 project name을 설정하시면 됩니다
프로젝트명을 정했다면 다음은 프레임워크 설정 창입니다. 저희는 React를 사용할 것이므로 React를 선택하시면 됩니다
이후에는 JS 혹은 TS를 쓸지 나오는데 저희는 JS를 사용할 것이기에 SWC를 사용하지는 않는 Javascript를 선택해줍니다
그러면 프로젝트 생성이 완성이 되었습니다
{
"scripts": {
"dev": "vite", // 개발 서버를 실행합니다. (`vite dev` 또는 `vite serve`로도 시작이 가능합니다.)
"build": "vite build", // 배포용 빌드 작업을 수행합니다.
"preview": "vite preview" // 로컬에서 배포용 빌드에 대한 프리뷰 서버를 실행합니다.
}
}
위의 코드는 package.json에 존재하는 코드이며 위의 코드를 이용하여 서버 실행, 빌드 등을 할 수 있습니다
만든 프로젝트를 실행할려면 프로젝트로 이동을 한 후에 실행하면 됩니다
cd vite-project
npm install
npm run dev
실행하면 다음과 같은 페이지가 생성이 됩니다!!
