[JS] 비트(Vite)란? - 비트 알아보기

Vite 란?

비트(Vite)는 Vue 창시자 Evan You가 만든 새로운 프론트엔드 도구로 프랑스어로 "빠르다(Quick)"를 의미하며 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이다. 현재 Vue, React, Svelte 등의 주요 프론트엔드 라이브러리, 프레임워크 커뮤니티에서 주목하고 있다.

---

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

 

웹팩(Webpack)과 같은 모듈 번들러가 나왔던 이유는 자바스크립트의 모듈화와 깊은 관계가 있다. 위에서 네이티브 자바스크립트 모듈이라고 언급했던 ESM(ECMAScript Modules)이 등장하기 전까지는 자바스크립트 언어 레벨에서의 모듈화 방식은 없었다.

 

 그래서 require.js와 같은 모듈 로더나 IIFE(Immediately Invoked Function Expression)를 사용하지 않으면 모듈화가 불가능했다. 이렇게 모듈화를 위한 커뮤니티 레벨의 라이브러리를 사용하다가 자바스크립트 언어에 모듈화 문법(import, export)이 들어오게 되었다.

 

이 모듈화 문법을 이용하여 여러 개의 파일을 하나로 합쳐주거나 의미 있는 단위로 묶어 주는 것을 번들링이라고 하는데 현재 프론트엔드 개발 생태계에서는 모듈 번들러로 대부분 웹팩을 사용하고 있다.

---

ESM(ECMAScript Modules)

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

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

console.log(sum(1, 2));

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

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

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

 

---

Vite 특징

Vite는 로컬에서 개발할 때 번들링을 하지 않고 ESM 방식을 사용하기 때문에 로컬 서버 구동 속도가 매우 빠르다. 수백 개 정도 되는 모듈을 갖고 있는 웹 서비스를 웹팩과 비트로 비교해 본다면 실행 시간이 수십 배 이상 차이가 난다.

 

웹팩은 처음 로컬 서버를 시작할 때 관련 있는 모듈들을 번들링 해서 메모리에 적재하는 시간이 필요하기 때문에 당연히 어느 정도의 시간이 필요하다. 반면 비트는 번들링을 하지 않고 바로 서버를 실행하기 때문에 명령어를 실행함과 동시에 서버가 바로 구동된다.

 

프로덕션을 위한 빌드를 실행할 때도 비트 자체에서 제공해 주는 빌드 옵션이 많다. 비트의 빌드 결과물 역시 기본적으로 번들링은 하지 않고 로컬 개발 서버의 ESM 방식을 사용하고 있다. 하지만 서비스 규모가 너무 큰 경우에는 선택적으로 번들링을 하는 게 더 이득일 수 있어 번들링 도구로 rollup을 사용할 수 있다.

기본적으로는 비트 자체에서도 충분히 프로덕션으로 배포할 수 있는 수준의 최적화를 진행해 주지만 별도의 번들링과 추가적인 커스텀 빌드 작업을 진행하고 싶은 경우에는 다음과 같이 롤업 번들러를 끼워서 사용할 수 있다.

// vite.config.js
module.exports = defineConfig({
  build: {
    rollupOptions: {
      // https://rollupjs.org/guide/en/#big-list-of-options
    }
  }
})

---

Vite가 해결한 문제

Cold start: 최초로 실행되어 이전에 캐싱한 데이터가 없는 경우를 의미한다.

Cold start 방식으로 개발 서버를 구동할 때, 번들러 기반의 도구의 경우 애플리케이션 내 모든 소스 코드에 대해 크롤링 및 빌드 작업을 마쳐야 실제 페이지를 제공할 수 있는데 Vite는 이 문제를 dependencies 그리고 source code 두 가지 카테고리로 나누어 개발 서버를 시작하도록 함으로써 해결했다.

 

Dependencies: 개발 시 그 내용이 바뀌지 않을 일반적인(Plain) JavaScript 소스 코드다. 기존 번들러로는 컴포넌트 라이브러리와 같이 몇 백 개의 JavaScript 모듈을 갖고 있는 매우 큰 디펜던시에 대한 번들링 과정이 매우 비효율적이었고 많은 시간을 필요로 했다.

Vite의 사전 번들링 기능은 esbuild를 사용하고 있다. Go로 작성된 esbuild는 Webpack, Parcel과 같은 기존의 번들러 대비 10-100배 빠른 번들링 속도를 보여준다.

 

Source code: JSX, CSS 또는 Vue/Svelte 컴포넌트와 같이 컴파일링이 필요하고 수정 또한 매우 잦은 Non-plain JavaScript 소스 코드는 어떻게 할까?

Vite는 Native ESM을 이용해 소스 코드를 제공하도록 하고 있다. 즉, 브라우저가 곧 번들러라는 것으로 비트는 그저 브라우저의 판단 아래 특정 모듈에 대한 소스 코드를 요청하면 이를 전달할 뿐이다.

---

Vite 시작하기

Vite는 버전 12.2.0 이상의 Node.js를 요구한다. 다만 일부 템플릿의 경우 더 높은 버전의 Node.js를 요구할 수 있다.

npm

$ npm create vite@latest

yarn

$ yarn create vite

이후에는 프롬프트 창에 출력된 메시지를 따라 Vue, React 등 원하는 템플릿을 선택하여 프로젝트를 생성한다.

물론 프로젝트의 이름이나 템플릿을 지정해 프로젝트를 만들 수 있다.

Vue 프로젝트 생성

# npm
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

 

create vite 섹션에서는 다양한 템플릿들에 대해 다루고 있다.

vanilla, vanilla-ts, vue, vue-ts, react, react-ts, preact, preact-ts, lit, lit-ts, svelte, svelte-ts

 

만들어진 Vite 프로젝트를 보면 index.html 파일이 public 디렉토리가 아닌 프로젝트의 루트(root)에 위치해 있는 것을 볼 수 있다. 의도적으로 이렇게 위치시킨 것인데 추가적인 번들링 과정 없이 index.html 파일이 앱의 진입점이 되게끔 하기 위함이다.

 

Vite는 index.html 파일을 소스 코드이자 자바스크립트 모듈 그래프를 구성하는 요소 중 하나로 취급하고 있다.

즉 <script type="module" src="..."> 태그를 이용해 자바스크립트 소스 코드를 가져온다는 의미이며 인라인으로 작성된 <script type="module">이나 <link href>와 같은 CSS 역시 Vite에서 취급이 가능하다.

 

추가적으로 Vite는 index.html 내에 존재하는 URL에 대해 %PUBLIC_URL%과 같은 Placeholder 없이 사용할 수 있도록 URL 베이스를 자동으로 맞춰준다.

 

Vite는 정적(Static) HTTP 서버와 비슷하게 루트 디렉토리(root directory)라는 개념을 갖고 있다.

향후 <root>라는 이름으로 문서 내에서 보게 되는데 이는 Absolute URL을 프로젝트 루트를 가리키게끔 함으로써 일반적인 정적 파일 서버와 동일하게 코드를 작성할 수 있게 된다. 또한 Vite는 프로젝트 루트 외부에서도 디펜던시(dependency)를 가져올 수 있게끔 구현했는데 이를 이용하면 MonoRepo 구성 등 다양한 작업이 가능하다.

MonoRepo는 Monolithic Repositories의 약자로 하나의 리포지토리에서 여러 개의 프로젝트가 구성된 것을 의미한다.

 

Vite은 개발 서버를 시작할 때 현재 위치해 있는 디렉토리를 프로젝트 루트로 가정하고 동작한다. 만약 특정 디렉토리를 루트로 지정하고 싶다면 vite serve some/sub/dir 명령으로 Vite를 시작하면 된다.