사용자 정의 번들링 설정 및 캐싱 레이어를 사용하여 Vite 빌드를 매우 빠르게 유지하세요.

Vite는 기본적으로 초고속이지만 코드베이스가 확장됨에 따라 과도한 롤업 컴파일 단계로 인해 프로덕션 빌드가 느려질 수 있습니다. 이 가이드에서는 manualChunks, esbuild 축소 설정 및 종속성 사전 번들링 구성을 사용하여 빌드를 최적화하는 방법을 간략하게 설명합니다.

1. 코드 분할: 자산 크기 균형 조정

기본적으로 Vite는 애플리케이션 코드를 통합 스크립트로 묶습니다. 초기 페이지 로드 중에 불필요한 JavaScript 다운로드를 방지하려면 개발자는 강력한 코드 분할 전략을 구현해야 합니다.

1) 동적 가져오기 활용

자산을 분할하는 가장 쉬운 방법은 동적 가져오기를 사용하는 것입니다. 이는 라우터 끝점을 격리하여 사용자가 페이지로 이동할 때만 페이지에서 코드를 가져오도록 합니다.

// React example of lazy-loaded routes
import { lazy } from 'react';
const HeavyDashboard = lazy(() => import('./pages/Dashboard'));

2) manualChunks을 사용하여 무거운 모듈 분할

외부 종속성(예: react-dom, lodash 또는 chart.js)은 거의 변경되지 않습니다. 이를 공급업체 청크로 묶으면 브라우저가 애플리케이션 수준 업데이트를 무시하고 영구적으로 캐시할 수 있습니다.

vite.config.js 스니펫 분할

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          // Isolate node_modules packages into dedicated chunks
          if (id.includes('node_modules')) {
            // Group by package name
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }
      }
    }
  }
});

2. 컴파일 시간 단축

1) 올바른 축소기 선택(Esbuild 대 Terser)

Vite는 코드 축소를 위해 기본적으로 esbuild을 사용하는데, 이는 기존 JavaScript 기반 옵션보다 최대 40배 빠릅니다. 팀에서 더 이상 사용되지 않는 ES5 호환성이나 엄격한 난독화(terser을 보장함)를 요구하지 않는 한 minify: 'esbuild'를 고수하세요.

2) 프로덕션 소스 맵 비활성화

프로덕션 빌드 중에 소스 맵(.map 파일)을 생성하면 막대한 메모리 할당이 소비되고 컴파일 루프 속도가 느려집니다. 서버 파이프라인에서 오류 추적을 위해 명시적으로 필요하지 않은 경우 비활성화합니다.

// vite.config.js
export default defineConfig({
  build: {
    sourcemap: false // Speed up builds by avoiding .map generation
  }
});

3. Dev Server 안정화: 종속성 사전 번들링

Vite를 실행하면 타사 모듈을 표준화된 ES 모듈(ESM)에 사전 번들하여 브라우저 캐싱을 최적화합니다.

Vite가 사전 번들 단계에서 생략된 동적 가져오기를 런타임 중에 발견하면 강제로 번들러를 다시 실행하고 브라우저 페이지를 다시 로드해야 합니다(전체 다시 로드 트리거). 무거운 가져오기를 명시적으로 색인화하여 이 동작을 방지합니다.

// vite.config.js
export default defineConfig({
  optimizeDeps: {
    include: ['heavy-editor-plugin', 'chart.js'] // Pre-bundle these libraries on startup
  }
});

4. 결론: 번들 감사

빌드 성능을 유지하려면 지속적인 관찰이 필요합니다. 번들 구성을 차트로 표시하려면 rollup-plugin-visualizer과 같은 도구를 설치하세요. 모듈 크기를 추적하고 공급업체 종속성을 분할하고 중복 소스 맵을 비활성화함으로써 Vite 빌드 파이프라인은 빠르고 효율적으로 유지됩니다.