Vite

기존의 프론트엔드 개발 경험을 향상시켜줄 새로운 프론트엔드 툴.
Vue, React, Svelte등의 주요 프레임워크 커뮤니티에서 주목하고 있는 도구이다.

Vite란?

자바스크립트 네이티브 모듈을 기반으로 한 데브 서버.
현대 프론트엔드 개발 생태계는 웹팩을 중심으로 개발 환경과 배포 시스템이 구축되어 있다.
Vite는 웹팩을 사용할 때보다 훨씬 더 빠르게 개발하고 배포할 수 있다.

번들링

웹팩, 롤업, 파셀과같은 모듈 번들러는 ESM이 등장하기 전까지 자바스크립트 언어 레벨에서의 모듈화 방식이 없었다.
require.js(모듈 로더)나 IIFE를 사용하지 않으면 모듈화가 불가능했다.
이 모듈화 문법을 이용하여 여러 개의 파일을 하나로 합쳐주거나 의미있는 단위로 묶어주는 것을 "번들링"이라고하는데, 현재 프론트엔드 개발 생태계는 모듈 번들러로 "웹팩"을 주로 사용하고 있다.

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

ESM은 모듈화 문법인 import, export를 별도의 도구 없이 브라우저 자체에서 소화해 낼 수 있는 모듈 방식을 의미한다.

기존의 브라우저에서는 import, export를 해석할 수 있는 능력이 없어 오류가 발생했었다.
하지만, 현재는 script 태그에 type="module" 속성을 추가하면 정상 동작하게 되었다.

• 브라우저에서 import와 export를 소화할 수 있는 능력이 "ESM"이다.

Vite 특징

Vite는 로컬에서 개발할 때 번들링을 하지 않고 ESM 방식을 사용하기 때문에 로컬 구동 속도가 매우 빠르다.
웹팩 데브 서버는 처음 로컬 서버를 시작할 때 관련 있는 모듈들을 번들링 해서 메모리에 적재하는 반면, Vite는 번들링 하지 않고 바로 서버를 실행하기 때문에 명령어 실행과 동시에 서버가 구동된다.

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

별도의 번들링과 추가적인 커스텀 빌드 작업을 진행하고 싶은 경우에는 Rollup 번들러를 끼워서 사용할 수 있다

vite.config.js