[Vue.js] 비트(Vite)란? (작성 중)

◽ 비트(Vite)가 나오게 된 배경

브라우저에서 ESM(ES Modules)을 지원하기 전까지는 자바스크립트 모듈화를 네이티브 레벨에서 진행할 수 없었다. 따라서 개발자들은 웹팩, Rollup, Parcel과 같은 도구를 이용하여 번들링(Bundling)이라는 우회적인 방법을 사용해야 했다.

하지만 자바스크립트 모듈이 1000개가 넘어가는 프로젝트라면 병목현상이 발생할 수 밖에 없다.

그래서 비트는 전 과정에 ESM을 이용하여 앱 사이즈가 커져도 갱신 시간에는 영향을 끼치지 않도록 했다.

 

📄 예제

번들러 없이 이 코드는 실행되지 않는다.

// app.js
import { sum } from './math.js';

console.log(sum(10, 20));

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

 

📄 예제

type="module"을 추가하면 정상적으로 동작한다.

<!-- type 속성을 지정하면 정상적으로 동작한다. -->
<!-- 브라우저에서 import와 export를 소화할 수 있는 능력이 바로 ESM이다. -->
<script type="module" src="./app.js"></script>

 

 

 

◽ 비트란?

비트는 이러한 ESM 방식을 사용하기때문에 실행 시간이 몇배 이상 빠르다.

웹팩 데브 서버는 처음 로컬 서버를 시작할 때 관련있는 모듈들을 번들링하여 메모리에 적재하는 시간이 필요하지만, 비트는 번들링을 하지않고 바로 서버를 실행하기때문에 명령어를 실행함과 동시에 서버가 바로 구동된다.

+) 프랑스어로 'quick'이 '비트'로 발음되기때문에 바이트가 아닌 비트로 발음하는 것이 맞다.

 

 

 

◽ 비트가 해결한 문제

*Cold-Starting 방식으로 개발 서버를 구동할 때 번들러 기반의 도구의 경우 애플리케이션 내 모든 소스 코드에 대해 크롤링 및 빌드 작업을 마쳐야지만 실제 페이지를 제공한다.

* Cold-Starting이란? 최초로 실행되어 이전에 캐시된 데이터가 없는 경우를 의미한다.

 

비트는 이러한 문제를 해결하기 위해 dependencies, source code 두가지 카테고리로 나누어 개발 서버를 시작한다.

- Dependencies: 개발 시 그 내용이 바뀌지 않을 일반적인 javascript 소스이다. 기존 번들러는 몇 백개의 js 모듈을 가진 디펜던시에 대한 번들링 과정이 매우 비효율적이었지만, 비트는 사전 번들링 기능을 Esbuild를 사용함으로서 기존 번들러에 대비하여 빠른 속도를 보여준다.

- Source code: JSX, CSS, Vue/Svelte 컴포넌트와 같이 컴파일링이 필요하고 수정이 매우 잦은 js 소스코드는 Native ESM을 이용하여 소스 코드를 제공한다. 이는 곧 브라우저가 번들러라는 의미로, 비트는 브라우저의 판단 아래 특정 모듈에 대한 소스 코드를 요청하면 전달한다.

 

번들링이 완료되어야 서버 구동이 시작된다.

ESM 방식으로 서버를 바로 구동한다.

 

 

 

◽ ESM 방식 vs 번들링

하지만 서비스 규모가 너무 큰 경우 선택적으로 번들링하는 것이 더 이득일 때도 있다.

이런 경우 비트는 번들링 도구로 'Rollup'을 사용한다.

Esbuild이 번들링에 필수적으로 요구되는 코드분할 및 CSS와 관련된 처리가 미비하기때문이며, 추후 안정화가 된다면 변경될 여지가 있다.

 

 

 

◽ Vite 시작하기

npm init vite@latest my-vite

 

 

---

 

 

Introduction | Cracking Vue.js

Vite를 사용해야 하는 이유 | Vite