Vite는 Evan You(Vue.js 제작자)가 만든 차세대 프론트엔드 빌드 툴이다. 개발 환경에서 브라우저 네이티브 ESM을 활용해 서버 시작 시간을 수백 ms로 줄이고, HMR을 밀리초 단위로 처리한다.
왜 빠른가
Webpack 개발 서버:
모든 모듈 번들링 → 서버 시작 (수십 초)
변경 → 전체 또는 청크 재번들 → HMR
Vite 개발 서버:
사전 번들링(esbuild, Go 기반): 의존성만 한 번
요청 시 ESM 모듈 직접 서빙 (번들 없음)
변경 → 해당 모듈 무효화만 → HMR (< 50ms)
설정
typescript
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
export default defineConfig({
plugins: [react()],
resolve: {
alias: { '@': path.resolve(__dirname, './src') },
},
server: {
port: 3000,
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
},
},
},
build: {
rollupOptions: {
output: {
manualChunks: {
vendor: ['react', 'react-dom'],
},
},
},
},
});
환경 변수
bash
# .env
VITE_API_URL=https://api.example.com
VITE_APP_NAME=MyApp
# 코드에서 사용
const apiUrl = import.meta.env.VITE_API_URL;
프레임워크 지원
관련 개념
