비트(Vite)에 놀아보자! 드랍 더 비트!

🐣 순서대로 잘 따라 왔는가

---

오늘의 정리는 다음의 순서대로 진행됐다. 스스로 잘 따라왔는지 모르겠다. 

번들러, 모듈 번들러 > 웹팩(Webpack) > 바벨(Babel) > 폴리필(Polyfill) > 비트(Vite)

 

아무튼 오늘 마지막으로 비트(vite)에 대해서 정리해보자!

 

 

 

🐣 비트(Vite)

---

 

1. 개념

 비트(Vite)는 Vue 창시자 Evan You가 만든 새로운 프론트엔드 도구로 프랑스어로 "빠르다(Quick)"의 의미를 지니고 있음. 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구. 

 Vite는 네이티브 자바스크립트 모듈(ES Module)을 기반으로 한 데브 서버. 이미 현대 프론트엔드 개발 생태계는 웹팩(Webpack)을 중심으로 개발 환경과 배포 시스템이 구축되어 있음. 비트는 웹팩보다 훨씬 더 빠르게 개발하고 배포할 수 있는데, 왜 빠른지는 다음에서 살펴보겠음!

 

 

2. Webpack 과 다른점?

 웹팩(Webpack)과 같은 기존의 번들 기반 방식에서는 모든 소스코드가 빌드되어서 한번에 번들링된 형태로 서비스를 제공했다면, Native ESM 기반 방식의 Vite에서는 그럴 필요가 없음. 번들링이 필요가 없고 브라우저에서 필요한 모듈의 소스코드를 import할때 이것을 전달만 하면 되는 방식.

 이것은 결국 현대 대부분의 브라우저에서 ESM을 지원하기에 가능한 것. ESM이 나오기 전에는 자바스크립트 언어레벨에서 지원하는 모듈시스템이 없었기 때문에 번들링이 필요했던 것이고, 지금은 자바스크립트 언어레벨에서 모듈시스템이 들어가 있고 거의 모든 브라우저에서 이것을 지원을 하기 때문에 Vite에서는 ESM을 기반으로 만들 수 있게 된 것!

 Webpack과 같은 기존 번들러는 모든 소스 코드를 제공하기 전에 번들로 묶음. 최신 브라우저에서 기본 ESM 지원을 활용하는 Vite는 사전 번들링 없이 주문형 모듈을 제공. 이를 통해 전체 빌드 단계가 필요하지 않아 개발 속도가 크게 향상.

 

 

3. ESM(ECMAScript Modules)?

ESM은 모듈화 문법인 import, export를 별도의 도구 없이 브라우저 자체에서 소화해 낼 수 있는 모듈 방식을 의미. 만약 아래와 같은 코드를 웹팩(Webpack)과 같은 번들러 없이 브라우저에서 실행하면 에러 발생.

// app.js
import { hello } from 'text.js';

console.log(hello("kevin", "haru");

<script src="app.js"></script>

 

예전에는 브라우저가 import와 export를 해석할 수 있는 능력이 없었지만 이제는 다음과 같이 속성을 추가하면 브라우저에서 import와 export를 소화할 수 있게 됨.

 

 

4. 어떻게 사용? (React)

보통은 React 프로젝트 생성할 때 속칭 ' CRA ' 라는 Create-React-App 명령어를 실행하지만 CRA는 빌드하는데 시간이 너무 오래 걸리고 양이 커서 불편할 때가 있음. 이럴 때 Vite는 간결한 모던 웹 프로젝트 개발에 초점을 맞춘 빌드 도구.

npm create vite@latest
// 프로젝트 기초 설정 후
npm install
npm run dev

 

 Vite 는 CRA보다 개발 시 속도가 더 빠르고 메모리도 적게 잡아먹는다는 큰 장점.  Vite는 esbuild를 이용해서 " 변경된 부분 " 만 새롭게 번들링. 여기서 속도가 차이가 남.  물론 Vite도 첫 실행에서는 전체 번들링을 진행(사전 번들링)하고 그 이후에는 변경된 부분만 새롭게 번들링. 

 

 

5. '번들링이 필요 없다'면서 왜 '빠른 번들링'이라할까?

  5-1. '번들링이 필요 없다'의 의미

개발모드

개발 모드에서 Vite는 최신 브라우저의 기본 ESM(ECMAScript 모듈) 지원을 활용하여 전체 코드베이스를 미리 묶는 것을 방지. 대신 주문형 모듈을 제공. 파일을 변경하면 변경된 모듈과 해당 종속성만 다시 로드되므로 HMR(핫 모듈 교체)이 매우 빨라지고 개발 환경이 빨라짐.

프러덕션 모드

생산을 위해 Vite는 번들링을 수행. 배포용 프로젝트를 빌드할 때 Vite는 내부적으로 롤업을 사용하여 모듈을 최적화된 파일로 묶음. 이 단계를 통해 트리 쉐이킹 및 코드 분할과 같은 기능을 통해 프로덕션 빌드의 성능과 효율성이 최대한 향상.

 

 

  5-2. '빠른 번들링'의 의미

개발 속도
- 초기 번들링 없음: 

개발 중에 모든 것을 미리 번들로 묶을 필요가 없음. 즉, 서버가 즉시 시작되고 대기 시간이 최소화

- 주문형 로딩:

현재 보기에 필요한 모듈만 로드되므로 개발 프로세스가 더욱 빠르고 응답성이 향상

배포 효율성
최적화된 번들링: 

배포할 때가 되면 Vite는 효율적인 프로덕션 빌드를 생성하는 데 최적화된 Rollup을 사용하여 전체 번들링 프로세스를 수행.

  5-3. 정리하면

개발 모드

Vite는 전통적인 번들링을 피하고 빠른 주문형 모듈 로딩을 위해 ESM을 사용

배포 모드

Vite는 애플리케이션을 번들로 묶어 최적화되고 효율적인 배포를 보장

Vite는 개발 시 전통적인 번들링이 필요하지 않다고 강조하면서도 생산을 위한 포괄적이고 최적화된 번들링 프로세스를 수행하므로 "빠른 번들링"이라는 용어 사용.

---

후! 내일도 파이팅하자!

 

참고

https://joshua1988.github.io/vue-camp/vite/intro.html

https://analogcode.tistory.com/39

https://kg-dlife.tistory.com/210

https://despiteallthat.tistory.com/256

https://khys.tistory.com/31

https://www.youdad.kr/js-module-system/

https://11001.tistory.com/212