React 프로젝트 Vitejs react-ts 로 빌드하기

vitejs

전부터 안쓰는 기능이 많은 CRA를 안쓰고 직접 빌드를 해봐야겠다고 생각만 해보다가 프로젝트에 vite를 사용한다고 해서 냅다 시작해 보았다.

 

장점

서버 구동시간

공식 문서에서 가장 먼저 어필하던게 서버 구동이 빠르다는 점이다.

dependencies 그리고 source code 두 가지 카테고리로 나누어 따로 번들링 한다고 한다.

dependencies는 개발하는 와중에 바뀌지 않을 내용이다.

Esbuild를 사용한 사전 번들링으로 기존 번들러 (Webpack, Parcel 포함) 보다 10~100배 빠르다고 한다. 

 

실행해 보니까 첫 구동때 체감이 될정도로 빠르다. 보통 5~6초 걸리던 프로젝트 시작시간이 한 2~3초 걸리는 느낌?

 

코드 갱신 시간

source code 부분

코드 갱신도 빠르다고 하는데

기존 개발을 진행할 때 소스 코드를 업데이트하면 다시 전체 앱의 번들링 과정을 거치는 과정으로

서비스가 커질수록 갱신시간이 증가 하는점을 보완하여

어떤 모듈이 수정되면 vite는 그저 수정된 모듈과 관련된 부분만을 교체하고, 브라우저에서 해당 모듈을 요청하면 교체된 모듈을 전달한다고 한다.

 

말만 들어도 무지하게 빨라질거 같은데 실제로 해보니 이 부분은 아직 체감하지 못했다.

튜토리얼로 만든 프로젝트가 워낙 작아서 그런거 같다. 

 

설정하기

// npm
npm create vite@latest

// yarn
yarn create vite

이후

vanilla, vanilla-ts, vue, vue-ts, react, react-ts, preact, preact-ts, lit, lit-ts, svelte, svelte-ts 중에서 원하는 프로젝트를 생성하면 된다.