Vite | 차세대 프론트엔드 빌드 도구

📖 상세 설명

Vite(프랑스어로 '빠른')는 Evan You(Vue.js 창시자)가 만든 차세대 프론트엔드 빌드 도구입니다. 개발 시에는 네이티브 ES 모듈을 활용해 번들링 없이 즉시 서버를 시작하고, 프로덕션 빌드는 Rollup으로 최적화된 번들을 생성합니다.

Vite가 빠른 이유는 두 가지입니다. 첫째, 개발 서버가 모든 모듈을 미리 번들링하지 않고 브라우저가 요청할 때 변환합니다. 둘째, esbuild(Go로 작성)를 사용해 의존성 사전 번들링과 TypeScript 변환을 수행합니다. 이로써 콜드 스타트가 수십 배 빨라집니다.

Vite는 프레임워크에 구애받지 않습니다. Vue, React, Svelte, Solid, Preact 등 다양한 템플릿을 공식 지원하며, SvelteKit, Nuxt 3, Astro 등 주요 메타 프레임워크도 Vite 기반입니다. 플러그인 시스템은 Rollup과 호환되어 생태계가 풍부합니다.

실무에서 Vite는 새 프로젝트의 사실상 표준이 되었습니다. Webpack 대비 설정이 간단하고, HMR이 밀리초 단위로 빠르며, TypeScript와 CSS 모듈을 기본 지원합니다. create-vite로 프로젝트를 생성하면 최적의 설정이 자동 적용됩니다.

💻 코드 예제

# Vite 프로젝트 생성
npm create vite@latest my-app -- --template react-ts
cd my-app && npm install && npm run dev

# vite.config.ts - 기본 설정
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  },
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          utils: ['lodash-es', 'date-fns']
        }
      }
    }
  },
  resolve: {
    alias: {
      '@': '/src'
    }
  }
})

# 환경 변수 사용 (.env)
VITE_API_URL=https://api.example.com

# 코드에서 사용
const apiUrl = import.meta.env.VITE_API_URL;

🗣️ 실무에서 이렇게 말하세요

💬 프로젝트 셋업에서

"새 프로젝트는 Vite로 시작하죠. npm create vite로 템플릿 선택하면 TypeScript, ESLint 설정이 다 되어 있어요. Webpack처럼 복잡한 설정 파일 만들 필요 없이 바로 개발 시작할 수 있습니다."

💬 면접에서

"Vite는 개발 시 ES 모듈을 브라우저에 직접 제공하고, 의존성만 esbuild로 사전 번들링합니다. Webpack처럼 전체 앱을 번들링하지 않아서 콜드 스타트와 HMR이 빠릅니다. 프로덕션은 Rollup으로 Tree Shaking과 코드 스플리팅을 적용합니다."

💬 마이그레이션 논의에서

"CRA에서 Vite로 마이그레이션하면 개발 서버 시작이 몇 초에서 밀리초로 줄어요. 다만 Webpack 전용 플러그인이 있다면 Vite 대체제를 찾거나 직접 플러그인을 작성해야 할 수 있어요."

⚠️ 흔한 실수 & 주의사항

❌

CommonJS 모듈 직접 import

Vite는 ES 모듈 기반입니다. require()나 CommonJS 전용 패키지는 의존성 사전 번들링으로 변환되지만, 일부는 수동 설정이 필요할 수 있습니다.

❌

환경 변수에 VITE_ 접두사 누락

클라이언트 코드에서 사용할 환경 변수는 반드시 VITE_로 시작해야 합니다. 그렇지 않으면 빌드 시 노출되지 않습니다.

✅

올바른 설정

optimizeDeps로 문제 있는 의존성을 명시적으로 포함/제외하고, alias로 경로를 단순화하세요. Rollup 플러그인도 대부분 그대로 사용 가능합니다.

🔗 관련 용어

📚 더 배우기

📄 Vite 공식 문서 🎓 Vite 마이그레이션 가이드 📖 Awesome Vite 리소스