[Why?] CRA => Vite

Vite를 사용하면서 우리가 누릴 수 있는 이점 

vite란?

 - 2세대 번들링 툴로써 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이다.

 - 기존 webpack에 비해 뛰어난 성능을 자랑한다.

 

번들링이란?

 - JS 파일을 하나로 합쳐주는 방식으로써 번들링 툴이랑 같이 사용해야 한다.

 - 작성한 소스코드나 설치한 라이브러리의 용량이 매우 크므로 묶어주는 작업이라고 생각하면 된다. (압축?)

 

1세대와 2세대 비교

1세대 : webpack(대표적인 번들링 툴)

 - 자체의 문제점이 있었다

 - 라이브러리가 많아지면 번들링이 매우 오래걸리는 문제점이 있었다

 - 번들링이 오래걸리면 미리보기 (개발환경) 에서 불편함이 많다

 - 소스코드 수정 or 라이브러리 install시에 새롭게 번들링을 하기에 매번 시간이 오래 걸린다.

 

2세대 : vite, snowpack

 - vite esbuild를 이용한 프리번들링으로 인해 속도가 매우 빠르다

 - 소스코드 작성한 것은 번들링하지 않고 실시간 미리보기를 띄어준다 (그래서 빠름)

 - 번들링해서 미리보기 띄우는 것이 빠른것임

 - HMR을 통해서 벼경사항만 수정해서 번들링하기에 매우 빠르다

 

사용해야하는 이유

1. 빠른 Cold Start (초기속도가 매우 빠르다)
2. 빠른 HMR (개별 모듈을 즉시 업데이트하여 빠른 HMR을 제공한다)
3. Native ES 모듈 (브라우저의 Native ES 모듈을 활용해서 빠르게 모듈을 로드한다)
4. 풍부한 플러그인 시스템 (Rollup 플러그인을 기반으로 하므로, 많은 플러그인을 사용할 수 있다.)