[Vite] 번들링 없는 프론트 빌드 Vite란 무엇일까?

 

 

 

 

🌈 Vite 란 무엇일까?

이미 프론트엔드 개발 생태계는 웹팩을 중심으로 한 개발 환경과 배포 시스템이 견고하게 구축되어 있지만, 웹팩을 사용할 때보다 훨씬 더 빠르게 개발하고 배포할 수 있기 때문에 비트(Vite)라는 도구가 새롭게 나오게 되었다.

 

비트(Vite)는 Vue의 창시자 Evan You에 의해 개발되었고, 프론트앤드의 주요 프레임워크 커뮤니티에서 주목받고 있는 도구이자 자바스크립트 네이티브 모듈(ESM) 을 기반으로 한 개발 도구이다.

 

 

 

 

1️⃣ 자바스크립트 네이티브 모듈 (ESM)

ESM은 모듈화 문법인 import, export를 브라우저에서 자체적으로 실행할 수 있는 모듈 방식을 의미한다.

 

만약 아래와 같은 코드를 웹팩과 같은 번들러 없이 브라우저에서 실행하면 에러가 발생한다.

// app.js
import { sum } from './math.js';
console.log(sum(10, 20));

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

 

하지만, script 태그에 type="module" 속성을 추가하면 정상적으로 동작하는데, 이와 같이 브라우저에서 import와 export를 실행할 수 있는 능력을 ESM라고 한다.

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

 

 

 

 

2️⃣ Esbuild

대부분의 리액트 개발자들은 공식 리액트 보일러 플레이트이며 HMR(Hot Module Replacement)과 같은 유용한 기능을 제공하기 때문에 주로 Create React App(CRA)을 이용하여 리액트 프로젝트를 생성할 것이다. 

 

CRA는 웹팩(Webpack)을 사용하며 웹팩은 자바스크립트 코드로 구성된 번들러이다.

웹팩의 경우 자바스크립트의 언어적 특성(interpreted ) 때문에 처리해야 할 코드의 양이 많을 경우 속도가 느려진다. 

 

그래서 개발자들은 Go와 같은 로우레벨 언어(low-level language)를 활용하여 자바스크립트의 새로운 툴을 만들려는 시도를 하였고, 그렇게 해서 생겨난 게 Esbuild이다.

 

 

 

 

3️⃣ Vite

위에서 살펴본 것처럼 Vite는 Esbuild를 기반으로 만들어진 프론트엔드 빌드툴이다.

 

Vite는 ESM 방식을 사용(=브라우저가 필요로 하는 애플리케이션 코드의 일부분만 변환하고 제공)하기 때문에 자바스크립트 코드를 모두 번들할 필요 없이 브라우저에서 자바스크립트 애플리케이션을 작동시킬 수 있다. 

 

◾ Vite의 특징

  ◽ 의존성 모듈은 node_modules 폴더로부터 import 되는 자바스크립트 모듈이며 esbuild를 사용하여 처리된다.

  ◽ Webpack이 브라우저의 요청 이전에 모든 자바스크립트 모듈을 처리하는 반면, 

     Vite는 브라우저 요청 전에 의존성 모듈만 미리 번들링 한다.

  ◽ Vite는 native ESM을 기반으로 HMR을 구현한다. 따라서 모듈이 수정될 때 Vite는 수정된 모듈과 관련된 부분만을

     교체하고, 브라우저에서 해당 모듈을 요청하면 교체된 모듈을 전달한다.

  ◽ 소스코드는 라이브러리 관련 확장자를 포함하며, 모든 소스코드가 동시에 로드될 필요는 없다

  ◽ Vite는 브라우저의 요청이 있을 시에만 소스코드를 변환하고 제공한다.

 

 

 

 

 

 

 

 

📌 참고사이트

Cracking Vue :: Vite

vitejs :: Why Vite