Vite - FE 빌드 도구

Vite란?

Vite는 차세대 프론트엔드 빌드 도구로, 특히 React, Vue, Svelte 같은 모던 프레임워크와 함께 빠른 개발 환경을 제공한다.

Vite의 주요 목표는 빠른 개발 서버와 최적화된 프로덕션 빌드이다.

---

왜 Vite가 빠를까?

Vite는 기본적으로 ES 모듈을 사용한다. 전통적인 빌드 도구들은 프로젝트 전체 파일을 번들로 묶어서 하나의 큰 파일로 만든다.

하지만, Vite는 ES 모듈을 이용해 필요한 파일만 브라우저로 바로 전달해 준다.

 

이게 왜 빠르냐면:

• 예전에는 빌드 과정에서 모든 파일을 한 번에 처리해야 했지만, Vite는 필요한 파일만 바로바로 가져다 쓴다.
• 변경된 파일만 핫 리로드(Hot Module Replacement, HMR)를 통해 빠르게 반영된다. 즉, 코드 변경을 즉시 브라우저에 반영하는데, 이게 거의 즉시 일어난다.

Vite 설치하고 바로 시작하기

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

Vite

 

Vite는 매우 간단하게 설치할 수 있다. 만약 React 앱을 Typescript 기반으로 만들고 싶다면, 아래 명령어로 시작할 수 있다.

// vite 설치
npm create vite@latest
// 프로젝트 생성
npm create vite@latest my-react-app -- --template react-ts
// vue, vue-ts, react, react-ts, react-swc, react-swc-ts, preact, preact-ts, lit, lit-ts, svelte, svelte-ts, solid, solid-ts, qwik, qwik-ts.

 

이렇게 하면 개발 서버가 아주 빠르게 시작된다.

Vite의 재미있는 특징

• 매우 빠른 HMR: Hot Module Replacement는 코드가 변경될 때, 브라우저를 새로고침하지 않고도 변경 사항이 바로 반영되는 기능이다. 전통적인 도구들보다 훨씬 빠르게 동작한다.
• 빠른 초기 로딩 속도: Vite는 필요할 때만 코드를 로드하기 때문에, 초기 로딩 속도가 매우 빠르다. 개발자가 작성한 코드만 바로바로 가져오기 때문에, 큰 프로젝트에서도 매우 효율적으로 작동한다.
• 프로덕션 빌드 최적화: Vite는 개발 서버뿐만 아니라 프로덕션 빌드에서도 최적화를 제공한다. 내부적으로 Rollup을 사용해서  코드 크기를 줄이고, 최적화된 번들을 만들어 준다.

Vite의 구조

Vite는 두 가지 큰 단계를 거친다.

• 개발 모드: ES 모듈을 사용해서 빠르게 개발 환경을 제공한다. 브라우저가 필요한 파일을 바로바로 가져오기 때문에 번들링 없이 즉시 개발 서버가 시작된다.
• 프로덕션 빌드: 프로덕션 단계에서는 Rollup을 사용하여 최적화된 빌드 파일을 생성한다. 이 빌드 파일은 일반적인 번들링 방식과 비슷하지만, Vite는 사전 최적화(pre-optimization)와 코드 분할 등의 기능을 통해 더 효율적인 빌드를 제공한다.

비유로 설명하자면 

• 전통적인 빌드 도구는 마치 대형 요리사의 부엌이다. 음식을 준비하기 전에 모든 재료를 미리 다 깔끔하게 손질하고, 큰 냄비에 넣어서 한꺼번에 요리하는 방식이다. 그러다 보니 손질 과정이 오래 걸리고, 시간이 지체된다.
• Vite는 그 반대이다. 필요한 재료를 즉석에서 꺼내고 바로 요리한다. 그래서 요리(코드 실행)가 매우 빠르게 이루어진다. 더군다나 수정한 부분만 다시 손질해서 빠르게 제공할 수 있는 셰프와 같은 도구이다.

 

결론

Vite는 빠르고 간단하며 효율적이다. 개발 서버는 즉시 시작되고, 코드 변경 사항이 실시간으로 브라우저에 반영된다.

게다가 프로덕션 빌드 시에도 최적화된 결과물을 제공한다.

 

이제 Webpack과 같은 도구에서 느리게 작업할 필요 없이 Vite를 사용해 보는 것을 추천한다.