Vite 7.0 출시: 주요 변경사항 및 마이그레이션 가이드

2025년 6월 24일, Vite 7.0이 공식 출시되었습니다. 이번 메이저 버전은 Node.js 지원 정책 변경, 브라우저 타겟 업데이트, Rolldown 통합 등 중요한 변경사항을 포함하고 있습니다. 주간 다운로드 수는 3,100만 건에 달하며, 지난 메이저 릴리즈 이후 1,400만 건이 증가했습니다.

📋 목차

1. 주요 변경사항
2. Vite 6.0과 비교
3. 마이그레이션 가이드
4. 새로운 기능
5. 생태계 업데이트

주요 변경사항

1. Node.js 지원 요구사항 상향

Vite 7.0은 이제 Node.js 20.19+ 또는 22.12+ 버전을 요구합니다.

변경 이유:

• require(esm) 지원을 위해 플래그 없이 사용 가능한 Node.js 버전 필요
• Vite를 ESM 전용으로 배포 가능
• Node.js 18 지원 중단

2. 브라우저 타겟 변경

기본 브라우저 타겟이 'modules'에서 'baseline-widely-available'로 변경되었습니다.

최소 브라우저 버전 업데이트:

이 변경으로 더 현대적인 JavaScript 기능을 활용할 수 있게 되어 번들 크기가 줄어들고 성능이 향상됩니다.

3. Environment API 개선

Vite 6에서 도입된 실험적 Environment API가 유지되었으며, 새로운 기능이 추가되었습니다.

주요 추가사항:

• buildApp 훅: 환경 빌드 중 플러그인 간 조정을 위한 새로운 훅
• 더 나은 플러그인 호환성과 환경별 빌드 제어

Vite 6.0과 비교

주요 차이점

성능 개선

• Rolldown 통합으로 대규모 프로젝트의 빌드 시간 단축 예상
• 더 효율적인 번들링과 최적화

마이그레이션 가이드

1단계: Node.js 버전 확인 및 업그레이드

# Node.js 버전 확인
node --version

# Node.js 20.19+ 또는 22.12+ 로 업그레이드 필요

2단계: package.json 업데이트

{
  "devDependencies": {
    "vite": "^7.0.0"
  }
}

3단계: 브라우저 타겟 확인

vite.config.js에서 커스텀 브라우저 타겟을 설정한 경우 검토가 필요합니다:

// vite.config.js
export default {
  build: {
    // 필요시 타겟 조정
    target: 'baseline-widely-available',
  },
};

4단계: Deprecated 기능 제거

제거된 기능들:

• Sass Legacy API 지원
• 기타 deprecated된 API들

Sass를 사용하는 경우, Modern API로 마이그레이션이 필요합니다:

// vite.config.js
export default {
  css: {
    preprocessorOptions: {
      scss: {
        // Legacy API 옵션 제거
        // api: 'legacy' // 제거
        api: 'modern', // 또는 생략 (기본값)
      },
    },
  },
};

5단계: Vitest 업데이트

Vitest를 사용하는 경우 3.2 이상으로 업데이트:

{
  "devDependencies": {
    "vitest": "^3.2.0"
  }
}

새로운 기능

1. Rolldown 통합 (실험적)

Rust 기반의 새로운 번들러 Rolldown이 실험적으로 통합되었습니다.

사용 방법:

npm install --save-dev rolldown-vite

// vite.config.js
import { defineConfig } from 'vite';
import rolldown from 'rolldown-vite';

export default defineConfig({
  plugins: [rolldown()],
});

장점:

• 더 빠른 빌드 시간 (특히 대규모 프로젝트)
• 향후 기본 번들러로 채택 예정
• Rust의 성능 이점 활용

2. buildApp 훅

새로운 buildApp 훅으로 플러그인 개발자는 환경별 빌드를 더 세밀하게 제어할 수 있습니다:

// 플러그인 예시
export default function myPlugin() {
  return {
    name: 'my-plugin',
    buildApp: {
      handler(options) {
        // 환경별 빌드 로직
        console.log('Building environments:', options.environments);
      },
    },
  };
}

생태계 업데이트

ViteConf 2025

• 최초의 오프라인 ViteConf가 암스테르담에서 개최(10월 9일 ~ 10일)
• Vite 생태계의 성장과 커뮤니티 활성화

Vite DevTools

VoidZero와 NuxtLabs가 협력하여 개발 중인 새로운 개발 도구:

• 향상된 디버깅 경험
• 성능 프로파일링
• 플러그인 인사이트

문서 번역

페르시아어(فارسی) 문서 번역이 추가되어 더 많은 개발자가 Vite를 접할 수 있게 되었습니다.

마무리

Vite 7.0은 성능, 현대성, 개발자 경험을 개선하는 중요한 업데이트입니다. Node.js 요구사항 변경과 일부 deprecated 기능 제거가 있지만, 전반적으로 Vite 6에서 부드러운 마이그레이션이 가능합니다.

주요 체크리스트:

• ✅ Node.js 20.19+ 또는 22.12+ 업그레이드
• ✅ 브라우저 타겟 검토
• ✅ Deprecated 기능 제거
• ✅ Vitest 3.2+ 업데이트 (해당 시)
• ✅ Rolldown 실험적 기능 테스트 (선택사항)

자세한 마이그레이션 가이드는 공식 문서를 참조하세요.