[Vite] Vite는 어떤 역할을 하고 있는가

[Vite] Vite는 어떤 역할을 하고 있는가

Vite를 사용하면서 잘 알지 못하고 사용하는 것 같아 한 번 정리하고자 글을 작성한다.

공식 홈페이지에 따르면 ‘Next Generation Frontend Tooling’ 이라고 소개한다.

Vite는 웹 개발에서 개발 서버와 번들링을 모두 처리하는 현대적인 빌드 도구로 설계되었다.

 

Vite의 기능 1 : 개발 서버 & HMR(Hot Module Replacement)

프론트엔드 개발자로서 Vite의 가장 체감되는 기능은 단연코 개발 서버 지원 및 HMR 이다.

Vite의 핵심적인 기능인 "개발 서버"의 서버 시작 시간을 어떻게 개선했는지에 대한 공식 문서의 설명을 정리해보았다. 

Vite는 애플리케이션의 모듈을 Dependencies와 Source code 두 가지 카테고리로 나눈다. 

1. Dependencies (의존성)은 보통 애플리케이션에서 사용하는 외부 라이브러리나 패키지를 의미한다.

 

예를 들어, React나 lodash, axios 같은 라이브러리들은 개발할 때 코드가 거의 수정되지 않고, 한 번 설치한 뒤에는 크게 변하지 않는다.

왜냐하면 개발 도중에 React 자체 코드를 고칠 일은 없기 때문이다...!

 

기존 번들러(Webpack, Parcel 등)는 이런 라이브러리들을 다 번들에 포함시켜서 하나의 큰 파일로 만들어 제공하는데, 애플리케이션의 크기가 점점 커질 수록 이 과정을 비효율적이다. 

 

그래서 Vite에서 말하는 사전 번들링 기능은 개발 시 변경되지 않을 JS 코드들을 Esbuild를 통해 사전 번들링한 후, 이후 개발 서버를 실행할 때는 사전 번들링된 정적인 코드만을 활용한다. esbuild는 Go로 작성된 초고속 번들러로, JavaScript 기반 번들러보다 최대 10-100배 빠르게 작업을 처리해 Vite의 개발 서버 초기 로딩을 크게 단축시킨다. 

공식 문서: Vite를 사용해야하는 이유 - Dependencies

 

2. Source code (소스 코드)는 우리가 직접 작성하는 애플리케이션 코드들을 의미한다.

 

React 컴포넌트 파일(TSX), 스타일(CSS), Vue나 Svelte 같은 프레임워크의 컴포넌트 파일들이 'source code'로 분류될 수 있다. 이 소스 코드들은 개발 중에 수시로 수정되기 때문에, 매번 번들링해서 제공하는 것이 비효율적일 수도 있다.

 

기존 번들러(Webpack, Parcel)는 이 소스 코드들까지도 모든 것을 한 번에 묶어서 브라우저에 제공하기에 비효율적이다.

예를 들어, 특정 페이지에서 특정 컴포넌트만 사용되고 있는데 전체 어플리케이션의 모든 컴포넌트를 한 번에 번들링해서 제공하는 방식은 불필요한 작업이 많기 때문이다.

 

Vite는 소스 코드를 Native ESM을 통해 필요한 순간에 로드하기 때문에, 특정 파일을 수정할 때 전체 프로젝트를 다시 번들링할 필요가 없다. 예를 들어, 한 페이지의 컴포넌트 파일이 수정되면 해당 파일만 다시 로드되며, 기존 번들러 방식의 전체 번들링과 달리 빠르게 반영된다. 

공식 문서: Vite를 사용해야하는 이유 - Source code

 

위 내용이 조금 많아 그림으로 정리해보자면 다음과 같다.

번들 기반의 개발 서버 VS Native ESM 기반의 개발 서버

---

Vite의 기능 2: 번들러로서의 Vite

ESM 방식은 대부분의 브라우저 환경에서 지원되지만, 개발 모드가 아닌 프로덕션 모드에서 ESM 방식만 사용하는 것은 중첩 가져오기 등의 문제로 비효율적이다. 프로덕션 모드에서는 브라우저의 네트워크 요청 수를 줄이고, 트리 쉐이킹을 통해 불필요한 코드를 제거하여 최적화된 코드 번들을 생성해야하기에 프로덕션 모드에서는 여전히 번들링이 필요로 한다. 

Vite 이 과정에서 내부적으로 Rollup 번들러를 사용하여  ESM 기반 코드를 하나의 파일로 묶어 제공하며, 필요한 경우 코드 분할 기능을 통해 사용하지 않는 코드도 제거한다. (*Rollup 또한 ESM 기반 모듈 번들러 중 하나이다.)

 

제대로 Vite를 사용해서 React + Typescript 프로젝트 만들어보기! (Scaffolding your first vite Project)

vite의 레포를 살펴보면 create-vite 폴더 내 다양한 템플릿을 제공하는 것을 볼 수 있다.

 

예를 들어, vanilla, vanilla-ts, vue, vue-ts, react, react-ts, react-swc, react-swc-ts, preact, preact-ts, lit, lit-ts, svelte, svelte-ts, solid, solid-ts, qwik, qwik-ts 등등 가장 hot(?)한 라이브러리들로 이루어진 템플릿을 확인할 수 있다. 

 

필자는 여기서 React + TS 조합으로 프로젝트 초기 세팅을 할 것이다.

 

1. npm create vite@latest

https://www.npmjs.com/package/create-vite

→ npm init vite와 결과는 거의 동일하지만, npm create vite@latest는 최신 버전을 명확히 사용할 수 있다 !

 

2. 프로젝트 이름 설정

프로젝트 세팅을 위해 이미 github에 레포를 만들어 clone 받아온 상태이고, 해당 디렉토리에 프로젝트를 생성하려면 프로젝트 이름을 .(점) 으로 구성하면 된다. (필자는 이를 몰라서 만들고 프로젝트 내부 파일을 옮기고 해당 폴더를 삭제하고와 같은 뻘짓을 했다.)

 

3. 프레임워크 설정 (Vanilla, Vue, React, Preact, Lit, Svelte, Others) → React

 

4. variant 설정 (Javascript, Typescript, Javascrtipt + SWC, Typescript + SWC) → Typescript

 

vite가 설치된 프로젝트는 vite 명령을 통해 실행할 수 있다. package.json을 확인하면 총 3개의 명령어를 확인할 수 있다. 

scripts를 작성하기 위한 커맨드 라인 인터페이스(Command line interface)는 공식 홈페이지에 자세하게 기술되어있다.

  "scripts": {
    "dev": "vite", // 개발 서버를 실행한다. 
    "build": "tsc && vite build", // 배포용 빌드 작업을 수행한다.
    "preview": "vite preview" // 로컬에서 배포용 빌드에 대한 프리뷰 서버를 실행한다.
  },

 

 

결론: Vite는 빌드 도구로 다음과 같은 역할을 한다.

 

• 로컬 개발 서버: 빠르고 효율적인 개발 환경을 제공하며, HMR(핫 모듈 교체) 기능으로 빠르게 변경 사항을 반영합니다.
• 파일 컴파일 및 변환: ESM 모듈 방식과 함께 TypeScript, JSX, Vue SFC 등 다양한 파일 형식을 지원하여 개발 생산성을 높입니다.
• 번들링: Rollup을 사용하여 프로덕션 빌드 시 코드 최적화와 함께 번들링을 처리합니다.
• 최적화: 트리 쉐이킹, 코드 스플리팅, 압축 등의 최적화 기법을 적용해 애플리케이션의 성능을 향상시킵니다.
• 에셋 처리: CSS, 이미지, 폰트 등의 자산을 효율적으로 관리하고 압축하여 최종 빌드 크기를 줄입니다.