Vite

Vite

Vite는 빠르고 간결한 웹 프로젝트를 위해 탄생한 빌드 도구 입니다.

ESM

ESM은 모듈화 문법인 import, export를 별도의 도구없이 브라우저 자체에서 소화해 낼 수 있는 모듈 방식을 의미합니다. 기존의 브라우저에서는 import와 export를 해석할 수 있는 능력이 없었지만, 이제는 script 태그에 아래와 같이 type="module" 속성을 추가하면 정상 동작하는 것을 볼 수 있습니다.

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

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

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

Vite 특징

Esbuild

Go로 작성된 Esbuild는 Webpack과 같은 기존 번들러 대비 10-100배 빠른 속도를 제공합니다.

Native ESM

기존 webpack과 같은 모듈 번들러를 이용할 때는 모듈 번들링을 끝낸 후 개발 서버를 구동하므로 시간이 오래 걸렸습니다. 이와 같은 문제점을 Vite는 Native ESm이라는 브라우저의 자체적인 모듈 기능을 사용하여 해결했습니다. Vite가 실행하는 개발 서버는 브라우저가 요청하는 모듈을 전송해주고 모듈 번들링 기능을 브라우저가 수행하기 때문에 개발 서버의 구동이 아주 빠릅니다.