Vite
Vite란 프랑스어로 '빠르다'라는 뜻을 지닌 말로 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이다.
Vite는 크게 두 가지에 초점을 맞춰서 개발 되었다.
개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공합니다. 가령, Hot Module Replacement (HMR)과 같은 것들 말이죠.
번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있습니다. 이는 높은 수준으로 최적화된 정적(Static) 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정(Pre-configured)을 제공합니다.
출처:
Vite공식 문서
여기서 말하는 Hot Module Replacement (HMR)이란 개발 중 특정 코드 변경 시, 페이지 새로고침 없이 해당 부분만 리로드하는 것을 의미한다.
즉 간단히 요약하자면 개발 단계와 번들링에서 더욱 다양하고 높은 성능의 기능을 제공한다는 것인데, 기본적인 개념은 Webpack과 유사한 듯 하다.
ESM (ECMAScript Module)
지금은 Javascript를 모듈화하여 사용하는 것이 널리 보급되어진 방식이지만 ESM의 등장 이전까지는 자바스크립트의 모듈화 방식은 없었다. 그래서 require.js와 같은 모듈 로더나 IIFE(Immediately Invoked Function Expression)를 사용하지 않으면 모듈화가 불가능했다.
이렇게 모듈화를 위한 커뮤니티 레벨의 라이브러리를 사용하다가 자바스크립트 언어에 모듈화 문법(import, export)이 들어오게 되었다. 이 모듈화 문법을 이용하여 여러 개의 파일을 하나로 합쳐주거나 의미 있는 단위로 묶어 주는 것을 Bundling(번들링)이라고 한다.
// app.js
import { sum } from 'test.js';
console.log(sum(1, 2));<script src="app.js"></script>즉, 위의 코드를 이전에는 브라우저가 이해할 수 없어 에러가 났으나,
<script type="module" src="main.mjs"></script>지금은 이렇게 모듈의 형태로 가져와 import할 수 있다.
이전에는 변수를 선언하면 전역에 할당이 되었으나, 이제는 모듈내에만 할당이 된다. class를 사용할 때에도 이전에는 this 키워드가 window를 뜻했다면 mjs에서 전역공간에 this를 사용하면 undefined가 된다.
const 철수 = 20
// ..js
console.log(window.철수) // 20
// ..mjs
console.log(window.철수) // undefined빠른 번들링?
Vite는 위에서 언급한대로 빠른 속도로 데브서버에 배포해주는데, 정확히 말하면 번들링을 하는게 아니라 ESM 방식을 사용하기 때문에 로컬 서버 구동 속도가 매우 빠른 것이다. 수백 개 정도 되는 모듈을 갖고 있는 웹 서비스를 웹팩과 비트로 비교해 본다면 실행 시간이 수십 배 이상 차이가 난다고 한다.
참조
