RDRYUSLOG DEV
블로그로 돌아가기
Javascript

vite 8 빌드 속도 느림 원인과 실무 해결 가이드

vite 8 빌드 속도 느림 원인과 원인별 실무 해결책을 정리합니다. 의존성 프리번들링, 플러그인, 캐시, 소스맵 등 점검 포인트와 코드 예제로 바로 적용 가능한 가이드를 제공합니다.

Vite빌드최적화번들링캐시
Vite 8 빌드 속도 느림 원인 분석을 설명하는 기술 블로그용 썸네일 이미지

vite 8 빌드 속도 느림 원인이 필요한 상황

vite 8 빌드 속도 느림 원인을 알고 있으면, 배포 파이프라인과 로컬 CI에서 불필요한 시간 낭비를 줄일 수 있습니다. 이 글에서는 느린 빌드가 발생하는 주요 원인과 각각의 실무적 진단 방법, 빠르게 적용 가능한 설정 변경 및 코드 예제를 통해 문제를 해결하는 방법을 다룹니다.

vite 8 빌드 속도 느림 원인 핵심 개념

Vite는 dev 서버에서는 ES 모듈 기반 빠른 번들을 제공하지만, 프로덕션 빌드는 Rollup을 이용해 번들링합니다. 빌드가 느려지는 주요 원인은 다음과 같습니다:

  • 의존성(prerender) 프리번들링/외부화 문제
  • 과도한 플러그인 실행 또는 플러그인 비동기 처리 병목
  • 커스텀 번들링 설정(rollup 옵션)이 최적화되지 않음
  • 소스맵 설정/타입스크립트 트랜스파일 시간
  • 캐시 무효화로 인한 전체 재빌드 각 항목은 서로 얽혀 있어 한 부분만 개선해도 전체 빌드 시간이 크게 줄어들 수 있습니다.

Vite에서 자주 발생하는 원인별 진단 방법

  • 빌드 로그: --debug 또는 DEBUG=vite:* 출력으로 플러그인 단계와 소요 시간을 확인
  • 프로파일링: Node의 --prof 옵션이나 Rollup 플러그인(profiler) 사용
  • 의존성 분석: pnpm why <pkg> 또는 번들 분석 플러그인(rollup-plugin-visualizer)
  • 캐시 확인: node_modules/.vite 및 .cache 디렉터리 크기와 타임스탬프

vite 8 빌드 속도 느림 원인 실무 예제

아래는 vite.config.js에서 불필요한 소스맵과 일부 플러그인을 프로덕션 빌드에서 비활성화하는 예제입니다.

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

export default defineConfig(({ command, mode }) => ({
  plugins: [
    react(),
    // legacy 플러그인은 오래된 브라우저용 변환으로 빌드 시간을 늘립니다.
    // 필요할 때만 활성화하세요.
    ...(mode === 'production' ? [legacy({ targets: ['defaults', 'not IE 11'] })] : [])
  ],
  build: {
    sourcemap: false, // 프로덕션에서 소스맵은 별도 설정으로 분리
    rollupOptions: {
      // 큰 라이브러리를 외부화하거나 동적 임포트로 분할
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) return 'vendor'
        }
      }
    }
  }
}))

위 예제는 소스맵 비활성화와 manualChunks로 vendor 분리를 통해 빌드 단계를 줄입니다. 실제로는 프로젝트 구조와 목표 브라우저에 따라 조정해야 합니다.

비교 기준표: 빌드 성능 판단 요소

구분항목1항목2항목3
내용의존성 크기플러그인 수/무거움소스맵/트랜스파일 여부

위 표를 기준으로 각 항목에 대해 로그를 남기고 개선 전/후를 비교하세요.

언제 쓰면 좋고 언제 피해야 할까

  • 언제 쓰면 좋은가:
    • 빠른 프로덕션 배포를 위해 빌드 시간을 줄여야 할 때
    • CI 시간(빌드/테스트) 비용이 높아 최적화가 필요한 경우
    • 대형 서드파티 의존성을 다루는 SPA에서 번들 크기와 빌드 시간을 모두 관리해야 할 때
  • 언제 피해야 하는가:
    • 레거시 브라우저를 반드시 지원해야 해서 legacy 플러그인을 제거할 수 없을 때
    • 디버깅을 위해 프로덕션 소스맵이 반드시 필요한 경우(대신 분리된 소스맵 업로드 고려)

실무 체크리스트

  • package.json과 lockfile이 일치하는지 확인(pnpm/yarn/npm)
  • node_modules/.vite 캐시가 유효한지 확인(불필요하면 삭제 후 재시작)
  • vite.config.js의 프로덕션 전용 플러그인 비활성화 여부 확인
  • build.sourcemap 설정을 프로덕션에서는 false로 설정
  • rollup manualChunks로 큰 라이브러리 분리 시도
  • 번들 분석(visualizer)으로 용량/모듈 의존성 파악
  • esbuild/transpileOptions 설정으로 불필요한 트랜스파일링 방지

성능·보안·운영 주의점

  • 성능:
    • 소스맵 비활성화는 디버깅을 어렵게 하므로 Sentry 등 외부 에러 모니터링과 연계해 분리 업로드 고려
    • esbuild는 빠르지만 일부 변환이 Rollup 플러그인과 충돌할 수 있음
  • 보안:
    • 빌드 파이프라인에서 민감한 환경변수(.env) 노출 주의. 빌드 아티팩트에 값이 포함되지 않도록 확인
    • 외부화(external) 설정 시 CDN의 신뢰성 및 무결성 확인
  • 운영:
    • CI 캐시 정책(노드 모듈, vite 캐시)을 도입해 반복 빌드 시간을 단축
    • 롤아웃 시 변경된 번들만 배포하는 전략(분할 번들/캐시 무효화 최소화)

샘플 진단 스크립트

아래 스크립트는 빌드 과정에서 시간 측정을 간단히 하는 예제입니다.

# build-timer.sh
start=$(date +%s)
npm run build
end=$(date +%s)
echo "Build time: $((end - start)) seconds"

이 스크립트를 CI에 넣어 변경 전후 빌드 시간을 자동으로 기록하세요.

자주 묻는 질문

Q1: vite 8에서 플러그인을 모두 제거하면 빌드가 빨라지나요? A1: 일부 플러그인은 빌드 시간을 크게 증가시킵니다. 그러나 기능적으로 필요한 플러그인은 제거 불가능하므로, 프로덕션에서만 실행하거나 대체 가능한 경량 플러그인으로 교체하는 것이 좋습니다.

Q2: 소스맵을 끄면 디버깅에 큰 문제가 없을까요? A2: 프로덕션에서 소스맵을 끄면 브라우저에서의 원래 코드 디버깅이 불가능해집니다. 대신 Sentry 같은 원격 에러 트래킹에 소스맵을 별도 업로드하거나, 소스맵을 비공개 스토리지에 보관하는 방식을 권장합니다.

Q3: 의존성 중 하나가 빌드를 지연시키는지 어떻게 찾나요? A3: rollup-plugin-visualizer나 vite의 debug 로그, 그리고 manualChunks로 특정 node_modules를 분리해 빌드 시간을 비교하면 병목 의심 모듈을 찾을 수 있습니다.

Q4: vite 8 특유의 변경 사항으로 빌드가 느려졌다면 어디를 먼저 봐야 하나요? A4: Vite 8 릴리즈 노트를 확인하고, 프리번들링(deps optimization)이나 esbuild 관련 기본 설정이 변경되었는지 확인하세요. 의존성의 트랜스파일링 대상이 넓어졌다면 그 부분이 영향을 미칠 수 있습니다.

정리

  • vite 8 빌드 속도 느림 원인은 플러그인, 의존성 프리번들링, 소스맵, 캐시 무효화 등 복합적임
  • vite.config.js에서 프로덕션 전용 설정을 분리하고 불필요한 플러그인 비활성화 권장
  • rollup manualChunks와 번들 분석으로 큰 의존성 분리
  • CI에 캐시 정책과 빌드 타이밍 측정 도구를 도입해 지속적으로 모니터링
  • 보안: 빌드 아티팩트에 민감 정보 포함되지 않도록 주의