[개발환경] Vite란?

Vite는 빠르고 현대적인 웹 개발을 위한 빌드 도구입니다. 프랑스어로 "빠름"을 의미하며, 그 이름처럼 빠른 개발 환경을 제공하는 것이 특징입니다. Vite는 프런트엔드 개발에서 흔히 사용되는 번들러인 Webpack과 같은 도구의 단점을 개선하고, 최신 브라우저 환경을 활용하여 성능 최적화를 제공합니다.

빠른 개발 서버

• 개발 서버에서 애플리케이션을 즉시 실행합니다. ES 모듈을 기반으로 하는 브라우저의 네이티브 모듈 시스템을 활용하여, 파일을 요청할 때만 필요한 모듈을 로드합니다.
• 핫 모듈 교체(Hot Module Replacement, HMR)가 매우 빠릅니다. 코드 변경 시 전체 애플리케이션을 다시 빌드하지 않고, 변경된 부분만 즉시 업데이트하여 반영합니다.

빌드 성능 향상

• esbuild와 Rollup을 사용하여 빌드 속도를 최적화합니다. esbuild는 Go 언어로 작성된 매우 빠른 번들러로, 자바스크립트와 타입스크립트 코드를 빠르게 변환합니다.
• 빌드 시 Rollup을 사용하여 최적화된 프로덕션 번들을 생성합니다. 이를 통해 코드 분할, 트리 셰이킹(Tree Shaking), 최적화된 번들링이 가능합니다.

ES 모듈 기반 개발

• 개발 환경에서 네이티브 ES 모듈을 사용합니다. 브라우저가 모듈을 직접 처리하기 때문에 번들링 없이도 모듈 간 종속성을 처리할 수 있습니다.
• 기존의 번들러와는 달리 처음부터 모든 파일을 번들링하지 않아도 되고, 코드가 커질수록 느려지는 문제를 피할 수 있습니다.

Vite 장단점

장점

• ES 모듈 기반 로딩을 통해 번들링 없이 바로 서버를 시작할 수 있어, 큰 프로젝트에서도 빠른 초기 구동 속도를 제공합니다.
• 변경된 모듈만 교체하기 때문에 빠른 핫 모듈 리로딩을 경험할 수 있습니다.
  최신 웹 표준 활용: 브라우저의 네이티브 모듈 시스템을 활용하여 최신 웹 개발 환경을 지원합니다.
• Rollup과 호환되는 플러그인 시스템을 갖추고 있어, 기존 Rollup 플러그인을 쉽게 사용할 수 있습니다.
• React, Vue, Svelte 등 다양한 프론트엔드 프레임워크를 위한 템플릿을 제공하며, 설정이 간단합니다.

단점

• Vite는 최신 ES 모듈을 사용하기 때문에, 오래된 브라우저에 대한 지원이 제한적일 수 있습니다.
• 모든 Webpack 플러그인이 Vite에 직접 호환되지는 않기 때문에, 기존 플러그인 사용 시 대체 플러그인을 찾아야 할 수도 있습니다.

다른 번들러(Webpack, Parcel)와의 비교

• Webpack: 오래된 번들러로서 커뮤니티와 플러그인 생태계가 매우 크지만, 설정이 복잡하고 개발 서버 성능이 느린 편입니다. 반면, Vite는 간단한 설정으로 빠른 개발 환경을 제공합니다.
• Parcel: 설정 없이 자동으로 번들링을 처리하는 점이 장점이지만, Vite에 비해 초기 서버 시작 속도와 HMR 성능이 다소 느립니다.

Vite 사용법 (React)

프로젝트 생성

npm create vite@latest my-vite-app -- --template react
cd my-vite-app
npm install
npm run dev

설정파일 (vite.config.js)

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// React 플러그인을 추가하고, 개발 서버의 포트를 3000번으로 설정하며, 빌드 출력 디렉토리를 dist로 지정
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000
  },
  build: {
    outDir: 'dist'
  }
});