ViteJS란 (react앱에 대해 CRA보다 Vite)

Vite는 원래 Vue 전용 빌드 툴이었지만 지금은 범용이다. Javascript 개발 환경의 두 가지 요구사항인 dev 모드 실행과 프로덕션용 빌드에 초점을 둔다. 

 

빠른 속도를 목표로 하는 Vite(프랑스어로 빠르다는 뜻)는 빠른 dev 서버 시작과 빠른 모듈 교체를 내세운다. 

 

높은 속도의 기반은 ESM 활용과 esbuild를 사용한 사전 번들링이다. ESM을 사용한다는 것은 개발 중에 번들링 작업 부하를 브라우저로 넘길 수 있고, 변경 중 제공된 파일을 확인할 때 더 높은 세분성을 달성할 수 있음을 의미한다.

 

앱 설정

$ npm init vite@latest vite_react_tutorial --template react
$ cd vite-react_tutorial
$ npm install
$ npm run dev

 

2021-11-01 추가

Vite에 대해 너무 대충 찾아봐서 계속 머리에 남아있다가 좀 더 검색해봤다.

 

Webpack이란?

웹팩은 자바스크립트 모듈 번들러의 한 종류이며 라이브러리 형태이다. 일반적으로 어떤 웹어플리케이션의 코드 수가 많아지면 보통 협업 및 유지보수 등의 이유로 코드를 분할하여 관리한다.

 

이렇게 되면 웹 어플리케이션에서 수 많은 자바스크립트 파일을 로딩하게되고 이는 네트워크 비용을 증가시키게 된다. 따라서 자바스크립트 파일들을 모듈화 시켜서 관리하게 해주는 라이브러리가 Webpack이다.

 

Webpack의 기본적인 개념으로는 자바스크립트 코드들을 모듈화하여 분할된 코드를 하나의 index를 통해 실행하게 하며 그 index로 다른 파일들을 모아주는 역할을 웹팩이 한다고 생각하면 된다.

 

CRA란?

CRA는 Create React App의 약자로 리액트를 현재 개발하고 있는 페이스북 팀에서 내놓은 공식 보일러 플레이트이다. 기본적으로 Webpack과 babel등을 이용하여 파일 로더, 빌드 툴,  es6 문법 지원, eslint 등 기본적인 리액트를 이용한 프론트 앤드 개발을 바로 할 수 있도록 되어 있다. 

 

https://medium.com/codex/you-should-choose-vite-over-cra-for-react-apps-heres-why-47e2e7381d13

You Should Choose Vite Over CRA for React Apps, Here’s Why

위 블로그 글에서 뭔가 좀 더 자세히 알게 됐다.

 

Vite는 Vue.js를 만든 Evan You가 만든 Esbuild 위에 구축된 차세대 프론트엔드 빌드 도구이다. 프로젝트 설정 프로세스를 아주 쉽게 해주는 CLI가 있고 매우 빠르게 작동하며 CRA(Create React App)가 제공하는 기능을 가지고 있다. 또한 추가할 수 있는 플러그인이 있어 개발 프로세스를 보다 간단하게 만들 수 있다.

 

CRA와 Vite를 비교할 때 경험과 빌드시간 측면에서 많은 차이가 있다. CRA에는 말 그대로 빌드 프로세스를 위한 구성 파일이 없으며 모든 것이 매우 간단하다.

 

개발을 위해 앱을 번들링하는동안 CRA는 코드에 변경사항이 있을 때 마다 전체 앱을 다시 번들링한다. Vite는 초기에 전체 앱을 묶고 변경된 파일만 묶는다. 이것은 빌드 프로세스를 더 빠르고 빠르게 만든다.

 

 

 

 

https://krpeppermint100.medium.com/js-react%EC%99%80-webpack-6ba46f84b327

https://vitejs.dev/guide/#scaffolding-your-first-vite-project

https://ichi.pro/ko/vitejswa-react-16166016763622