[Vite] Vite란? ( 사용하면 리액트 10배 빨라짐 )

오늘은 Vite에 대해 알아보겠습니다.

 

 

[  Vite란? ] 

Vite(비트)는 프랑스어로 '빠르다'라는 뜻을 가진 단어로, 차세대 프런트엔드 개발 도구입니다. 이름처럼 빌드와 개발 서버 구동 시간이 매우 빠릅니다. 기존에 자주 사용하던 webpack, rollup 등의 빌드 도구는 자바스크립트 언어로 만들어졌지만, Vite가 내부적으로 사용하는 ESBuild는 Go라는 네이티브 언어로 만들어진 도구를 이용해 빌드하기 때문에 빌드 속도가 아주 빠릅니다.

 

Webpack, Parcel등과 비교하면 10배 이상의 빠른 속도를 자랑합니다. ( 안쓸 이유가? ) 

 

또한 개발 서버를 이용할 때도 아주 빠릅니다. 기존 webpack과 같은 모듈 번들러를 이용할 때는 모듈 번들링을 끝낸 후 개발 서버를 구동하므로 시간이 오래 걸렸습니다.

 

https://ko.vitejs.dev/guide/why.html

 

 

이와 같은 문제점을 Vite는 Native ESM이라는 브라우저의 자체적인 모듈 기능을 사용하여 해결했습니다. Vite가 실행하는 개발 서버는 브라우저가 요청하는 모듈을 전송해 주고, 모듈 번들링 기능을 브라우저가 수행하기 때문에 개발 서버의 구동이 아주 빠릅니다.

 

https://ko.vitejs.dev/guide/why.html

 

⭐️ 느렸던 소스 코드 갱신

기존의 번들러 기반으로 개발을 진행할 때, 소스 코드를 업데이트 하게 되면 번들링 과정을 다시 거쳐야 했었습니다. 따라서 서비스가 커질수록 소스 코드 갱신 시간 또한 선형적으로 증가하게 됩니다.

 

일부 번들러는 메모리에서 작업을 수행하여 실제로 갱신에 영향을 받는 파일들만을 새롭게 번들링 하도록 했지만, 결국 처음에는 모든 파일에 대한 번들링을 수행해야 했습니다. "모든 파일"을 번들링 하고, 이를 다시 웹 페이지에서 불러오는 것이 얼마나 비효율적인 것인지 느껴지시나요? 이러한 이슈를 우회하고자 HMR(Hot Module Replacement)이라는 대안이 나왔으나, 이 역시 명확한 해답은 아니었습니다.

 

물론, vite는 HMR을 지원합니다. 이는 번들러가 아닌 ESM을 이용하는 것입니다. 어떤 모듈이 수정되면 vite는 그저 수정된 모듈과 관련된 부분만을 교체할 뿐이고, 브라우저에서 해당 모듈을 요청하면 교체된 모듈을 전달할 뿐입니다. 전 과정에서 완벽하게 ESM을 이용하기에, 앱 사이즈가 커져도 HMR을 포함한 갱신 시간에는 영향을 끼치지 않습니다. 

 

또한 vite는 HTTP 헤더를 활용하여 전체 페이지의 로드 속도를 높입니다. 필요에 따라 소스 코드는 304 Modified로, 디펜던시는 Cache-Control: max-age=31536000, immutable을 이용해 캐시됩니다. 이렇게 함으로써 요청 횟수를 최소화하여 페이지 로딩을 빠르게 만들어 줍니다. 

 

이렇게나 빠른 Vite를 사용하지 않을 이유가 있나요?

 

 

[ 프로젝트 생성 ]

Vite를 이용해 리액트 프로젝트를 생성하는 방법은 다음과 같습니다.

 

📌 ES6 언어를 사용하는 프로젝트 생성 

npm init vite [프로젝트명] -- --template react
yarn create vite [프로젝트명] -- --template react

 

📌 타입스크립트 언어를 사용하는 프로젝트 생성

npm init vite [프로젝트명] -- --template react-ts
yarn create vite [프로젝트명] -- --template react-ts

 

vite를 통해 생성된 프로젝트의 디렉터리 구조는 다음과 같습니다. 

 

src: 자바스크립트와 타입스크립트 코드를 작성하는 디렉터리입니다. 진입 파일은 main.tsx 또는 main.jsx입니다. 

 

public: 정적 파일과 리소스를 이곳에 작성합니다. 이 디렉터리는 자동으로 만들어지지 않으므로 직접 생성해야 합니다.

 

dist: 빌드 후 생성된 산출물이 저장되는 디렉터리입니다. 

 

 

프로젝트 내에서 다음 명령어를 사용해 개발 서버를 구동하거나 빌드할 수 있습니다. 

 

📌 빌드 명령어 

1. npm run build 
2. yarn build

 

📌 개발 서버 시작 명령어

1. npm run dev
2. yarn dev

 

🏷️ 출처

https://ko.vitejs.dev/guide/

Vite