Vite는 특히 개발 서버 시작과 관련하여 빠른 프런트엔드 빌드 도구로 명성을 얻었습니다. 이 기사에서는 Vite가 빠른 이유를 분석하고 빌드 성능을 더욱 향상시키기 위한 구성 조정을 살펴봅니다.

Vite가 빠른 이유

Vite와 Webpack과 같은 기존 번들러의 주요 차이점은 Vite가 개발 및 생산에 서로 다른 전략을 사용한다는 것입니다.

개발: 기본 ES 모듈 제공

개발 중에 Vite는 번들링을 완전히 건너뜁니다. 브라우저의 기본 ES 모듈 지원을 활용하여 요청된 파일만 변환하고 제공합니다. 이는 프로젝트 규모가 아무리 커지더라도 개발 서버 시작이 즉시 유지된다는 것을 의미합니다.

프로덕션: 롤업 최적화

프로덕션 빌드의 경우 Vite는 내부적으로 Rollup을 사용하여 트리 쉐이킹 및 코드 분할을 처리합니다. 모든 것은 단일 vite.config.ts 파일을 통해 구성됩니다.

성능 튜닝 구성

사전 번들링 종속성

Vite는 node_modules의 종속성을 미리 번들로 묶습니다. 이는 첫 번째 npm run dev에서 발생하고 캐시되므로 후속 시작이 훨씬 빨라집니다.

사전 번들 단계에서 특정 종속성을 강제로 제거해야 하는 경우 optimizeDeps.exclude을 사용하세요.

export default defineConfig({
  optimizeDeps: {
    exclude: ['large-dependency']
  }
})

더 스마트한 번들을 위한 ### manualChunk

생산 출력 크기를 최적화하려면 build.rollupOptions.output.manualChunks을 구성합니다. 라이브러리별로 번들을 분할하면 브라우저 캐시 효율성이 향상됩니다.

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          ui: ['@mui/material', '@emotion/react']
        }
      }
    }
  }
})

이는 React 라이브러리를 vendor 청크로 분할하고 MUI를 ui 청크로 분할합니다. 앱 코드만 업데이트하면 라이브러리 캐시가 그대로 유지됩니다.

경로 별칭

@/components/Button과 같은 경로 별칭을 구성하면 import 문을 깔끔하고 읽기 쉽게 유지할 수 있습니다.

import { resolve } from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  }
})

tsconfig.json의 별칭을 미러링하는 것을 잊지 마세요:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

환경 변수

import.meta.env.VITE_*을 통해 Vite의 환경 변수에 액세스합니다. 프로젝트 루트에 .env 파일을 배치하면 런타임 오버헤드 없이 개발과 프로덕션 간에 값을 전환할 수 있습니다. 변수는 빌드 시 정적으로 인라인됩니다.

# .env
VITE_API_URL=https://api.example.com

# .env.development
VITE_API_URL=http://localhost:3000

프로덕션 빌드 출력 검사

번들 크기를 시각화하려면 vite-bundle-analyzer 플러그인을 사용하세요.

npm add -D vite-bundle-analyzer

이를 vite.config.ts에 추가하면 다음 빌드에서 가장 많은 공간을 소비하는 모듈이 정확히 무엇인지 표시됩니다.

요약

Vite는 기본적으로 매우 빠르지만 수동 청크 분할 및 경로 별칭과 같은 기본 조정을 추가하면 개발 및 프로덕션 배포가 더욱 원활해집니다. 소규모 프로젝트로 시작하여 이러한 설정을 실험하고 팀에 가장 적합한 구성을 찾으십시오.