개요

Vite는 Evan You가 만든 차세대 프론트엔드 빌드 도구로, ESM 기반의 번개처럼 빠른 개발 서버와 Rollup 기반의 최적화된 프로덕션 빌드를 제공합니다. Vite 6.0은 Environment API 도입, Rolldown 통합 준비, 향상된 서버 사이드 렌더링 지원 등 메이저 업데이트를 포함합니다. 왜 Vite가 프론트엔드 빌드 도구의 표준이 되었는지 살펴봅니다.

핵심 개념

1. Environment API: Vite 6.0의 가장 큰 변화입니다. 클라이언트, SSR, 워커 등 다양한 환경을 통합된 API로 관리할 수 있습니다. 이전에는 ssr 옵션으로 분리했던 설정이 환경 단위로 세분화되었습니다.

2. 네이티브 ESM 개발 서버: 개발 중에는 브라우저의 네이티브 ES 모듈을 활용하여 번들링 없이 즉각적인 모듈 로딩이 가능합니다. 프로젝트 규모에 관계없이 일정한 개발 서버 시작 시간을 보장합니다.

3. HMR (Hot Module Replacement): 모듈 수준의 정밀한 핫 리로딩을 지원합니다. 파일 변경 시 해당 모듈과 의존 모듈만 교체되어 상태가 유지됩니다.

4. 플러그인 시스템: Rollup 호환 플러그인 인터페이스를 기반으로 하며, Vite 전용 훅을 추가로 제공합니다. 풍부한 플러그인 생태계를 활용할 수 있습니다.

실전 예제

Vite 6.0의 새로운 Environment API 설정 예시입니다.

// vite.config.ts - Vite 6.0 Environment API
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],

  environments: {
    // 클라이언트 환경 설정
    client: {
      build: {
        outDir: 'dist/client',
        rollupOptions: {
          output: {
            manualChunks: {
              vendor: ['react', 'react-dom'],
              utils: ['lodash-es', 'date-fns'],
            },
          },
        },
      },
      resolve: {
        conditions: ['browser'],
      },
    },
    // SSR 환경 설정
    ssr: {
      build: {
        outDir: 'dist/server',
        ssr: true,
      },
      resolve: {
        conditions: ['node'],
        externalConditions: ['node'],
      },
    },
  },

  server: {
    warmup: {
      clientFiles: ['./src/main.tsx', './src/App.tsx'],
    },
  },
});

커스텀 플러그인 작성 예시입니다.

// 빌드 시간 측정 플러그인
function buildTimerPlugin(): Plugin {
  let startTime: number;

  return {
    name: 'build-timer',
    buildStart() {
      startTime = Date.now();
    },
    closeBundle() {
      const duration = Date.now() - startTime;
      console.log(`Build completed in ${duration}ms`);
    },
    // Vite 전용 훅
    configureServer(server) {
      server.middlewares.use((req, res, next) => {
        console.log(`[DEV] ${req.method} ${req.url}`);
        next();
      });
    },
  };
}

활용 팁

• Library Mode: Vite의 라이브러리 모드를 활용하면 npm 패키지를 쉽게 빌드할 수 있습니다. build.lib 옵션으로 ESM, CJS, UMD 등 다양한 포맷을 지원합니다.
• glob import: import.meta.glob()을 사용하면 파일 시스템 기반으로 모듈을 동적 임포트할 수 있습니다. 라우트 자동 생성에 유용합니다.
• 환경 변수: .env 파일과 VITE_ 접두사로 환경 변수를 관리하세요. import.meta.env로 접근 가능합니다.
• 워커 지원: new Worker(new URL('./worker.ts', import.meta.url))로 타입 안전한 웹 워커를 사용할 수 있습니다.
• SSR 최적화: Environment API를 활용하면 클라이언트와 서버 빌드의 설정을 독립적으로 최적화할 수 있습니다.
• Rolldown이 안정화되면 프로덕션 빌드 속도도 비약적으로 향상될 것으로 기대됩니다.

마무리

Vite 6.0은 단순한 빌드 도구를 넘어 프론트엔드 개발 플랫폼으로 진화하고 있습니다. Environment API는 복잡한 SSR 시나리오를 우아하게 처리할 수 있게 해주며, Rolldown 통합은 개발과 프로덕션 빌드의 일관성을 보장할 것입니다. React, Vue, Svelte, Solid 등 주요 프레임워크 모두 Vite를 기본 빌드 도구로 채택하고 있어, 프론트엔드 개발자에게 Vite는 필수 역량이 되었습니다.