vite를 사용해보자.
나는 React를 사용해 왔기 때문에 React와 함께 써 볼 것이다.
Vite 란?
최신 웹 개발 보도구로 React나 Vue와 같은 프레임워크와 함께 사용되는 빌드 도구이다.
Vite가 Webpack이나 Parcel과 같은 전통적인 번들러를 위협하는 차세대 번들러(bundler)로 빠르게 부상하고 있다고 한다.
Vite는 기존 자바스크립트 번들러의 만성적인 성능 문제를 해결하고 개발자 경험을 향상시키기 위해서 등장한 차세대 번들러이다. 브라우저에서 지원하는 ESM(ES Modules)를 적극적으로 활용하고, 자바스크립트 대신에 컴파일 언어인 Go로 작성된 현대적인 자바스크립트 개발 도구이다.
Webpack보다 설정이 훨씬 쉽고 간단하고 Parcel보다도 더 간단하다~
90%인 Webpack 다음으로 vite가 빠르게 쫒아오고 있다
하지만 만족도는 이미 앞질렀다!
참고로 발음은 '바이트'가 아니라 '비트'라고 한다.
실행 명령어
React만 단독으로 사용했을 때는 터미널에서 실행 명령어가
npm start였다면
vite를 사용하면
npm run dev명령어를 입력한다!
- 아예 처음 셋팅할때 명령어 순서 :
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run devVite가 나온 이유
JS는 module이 없는 채로 세상에 나왔다.
모듈 없이는 프로그램의 덩치를 키우기 힘들다.
그래서 npm의 등장으로 만들어진 module을 공유할 수 있게 되었다.
출처 : JavaScript 번들러로 본 조선시대 붕당의 이해
https://wormwlrm.github.io/2020/08/12/History-of-JavaScript-Modules-and-Bundlers.html
요기서 나오는 번들러부터
- 번들러 > esbuild > snowpack > Vite 순으로 세상에 나오게 되었다.
esbuild와 브라우저 모듈을 이용한 개발모드, 개발서버, 프록시 서버, 번든 툴, 코드 스프리팅, HMR 등 지금까지 나왔던 snowpack의 컨셉과 다른 번들도구들에서 제공하는 기능을 한데 모은 프론트엔드 번들 도구이다.
매우 높은 만족도를 이루고 있다고!
Create React App대신 사용하는 이유
CRA는 JavaScript로 구성된 Webpack을 사용하는데 속도가 느린편이다. 평소에는 못느낄 수 있지만 처리해야 할 코드의 양이 많아질 수록 느린 속도를 채감할 수 있다.
위와 같은 단점을 해결하기 위해 Esbuild를 기반으로 만들어진 빌드툴인 Vite를 사용하게 된다.
위에 설명했듯 Esbuild는 Go언어로 작성된 JavaScript빌드 툴이라서 속도가 굉장히 빠르다
다시 빈 파일을 생성해서 위 명령어대로 셋팅해보았다
성공!
참고 문헌
https://velog.io/@teo/vite
https://velog.io/@homile/react-vite
https://www.daleseo.com/vite/
