Vite 5 완벽 가이드 | 빌드 도구·HMR·플러그인·최적화·Rollup

· 21분 읽기 · 수정 중급
Vite 5 완벽 가이드 | 빌드 도구·HMR·플러그인·최적화·Rollup

이 글의 핵심

Vite 5로 빠른 개발 환경을 구축하는 완벽 가이드입니다. 설치부터 HMR, 플러그인, 환경 변수, 빌드 최적화, Rollup 설정까지 실전 예제로 정리했습니다.

실무 경험 공유: Webpack 프로젝트를 Vite로 마이그레이션하면서, 개발 서버 시작 시간을 40초에서 2초로 단축하고 HMR을 10배 빠르게 만든 경험을 공유합니다.

들어가며: “Webpack이 너무 느려요”

실무 문제 시나리오

시나리오 1: 개발 서버가 40초 걸려요
Webpack dev server 시작이 느립니다. Vite는 2초입니다.

시나리오 2: HMR이 느려요
파일 저장 후 반영이 3초 걸립니다. Vite는 즉시 반영됩니다.

시나리오 3: 설정이 복잡해요
Webpack 설정이 수백 줄입니다. Vite는 최소한의 설정으로 시작합니다.

1. Vite란?

핵심 특징

Vite는 차세대 프론트엔드 빌드 도구입니다.

주요 장점:

  • 빠른 시작: ESBuild로 즉시 시작
  • 빠른 HMR: 네이티브 ESM 활용
  • 간단한 설정: 최소한의 설정
  • 플러그인: Rollup 플러그인 호환
  • 프레임워크 지원: React, Vue, Svelte 등

성능 비교:

  • Webpack: 개발 서버 40초, HMR 3초
  • Vite: 개발 서버 2초, HMR 즉시

2. 프로젝트 생성

템플릿으로 시작

# React
npm create vite@latest my-app -- --template react-ts

# Vue
npm create vite@latest my-app -- --template vue-ts

# Svelte
npm create vite@latest my-app -- --template svelte-ts

# Vanilla
npm create vite@latest my-app -- --template vanilla-ts

수동 설정

npm install -D vite
// package.json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

3. 기본 설정

vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    open: true,
  },
  build: {
    outDir: 'dist',
    sourcemap: true,
  },
  resolve: {
    alias: {
      '@': '/src',
    },
  },
});

4. 플러그인

공식 플러그인

# React
npm install -D @vitejs/plugin-react

# Vue
npm install -D @vitejs/plugin-vue

# Svelte
npm install -D @sveltejs/vite-plugin-svelte

인기 플러그인

# PWA
npm install -D vite-plugin-pwa

# 이미지 최적화
npm install -D vite-plugin-imagemin

# SVG
npm install -D vite-plugin-svgr
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { VitePWA } from 'vite-plugin-pwa';
import svgr from 'vite-plugin-svgr';

export default defineConfig({
  plugins: [
    react(),
    svgr(),
    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        name: 'My App',
        short_name: 'App',
        theme_color: '#ffffff',
      },
    }),
  ],
});

5. 환경 변수

.env 파일

# .env
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My App
# .env.production
VITE_API_URL=https://api.production.com

사용

// src/config.ts
export const config = {
  apiUrl: import.meta.env.VITE_API_URL,
  appTitle: import.meta.env.VITE_APP_TITLE,
  isDev: import.meta.env.DEV,
  isProd: import.meta.env.PROD,
};

TypeScript 타입

// src/vite-env.d.ts
/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_API_URL: string;
  readonly VITE_APP_TITLE: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

6. 정적 파일

public 디렉터리

public/
├── favicon.ico
├── robots.txt
└── images/
    └── logo.png
<!-- 절대 경로로 참조 -->
<img src="/images/logo.png" alt="Logo" />

src 디렉터리

// 상대 경로로 import
import logo from './assets/logo.png';

function App() {
  return <img src={logo} alt="Logo" />;
}

7. CSS

CSS Modules

/* Button.module.css */
.button {
  background: blue;
  color: white;
}
import styles from './Button.module.css';

export function Button() {
  return <button className={styles.button}>Click me</button>;
}

PostCSS

npm install -D postcss autoprefixer
// postcss.config.js
export default {
  plugins: {
    autoprefixer: {},
  },
};

Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
// tailwind.config.js
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

8. 빌드 최적화

코드 스플리팅

// 동적 import
const Dashboard = lazy(() => import('./Dashboard'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Dashboard />
    </Suspense>
  );
}

청크 분리

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

압축

// vite.config.ts
import viteCompression from 'vite-plugin-compression';

export default defineConfig({
  plugins: [
    viteCompression({
      algorithm: 'gzip',
      ext: '.gz',
    }),
  ],
});

9. 프록시 설정

// vite.config.ts
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
});
// 사용
fetch('/api/users')  // → http://localhost:8080/users

10. 라이브러리 모드

라이브러리 빌드

// vite.config.ts
import { resolve } from 'path';

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'MyLib',
      fileName: (format) => `my-lib.${format}.js`,
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
        },
      },
    },
  },
});

11. 실전 예제: React 앱

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { VitePWA } from 'vite-plugin-pwa';
import viteCompression from 'vite-plugin-compression';

export default defineConfig({
  plugins: [
    react(),
    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        name: 'My React App',
        short_name: 'App',
        theme_color: '#ffffff',
        icons: [
          {
            src: '/icon-192.png',
            sizes: '192x192',
            type: 'image/png',
          },
        ],
      },
    }),
    viteCompression(),
  ],
  
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      },
    },
  },
  
  build: {
    outDir: 'dist',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom', 'react-router-dom'],
          ui: ['@mui/material', '@emotion/react', '@emotion/styled'],
        },
      },
    },
  },
  
  resolve: {
    alias: {
      '@': '/src',
      '@components': '/src/components',
      '@utils': '/src/utils',
    },
  },
});

12. Webpack에서 마이그레이션

1단계: Vite 설치

npm install -D vite @vitejs/plugin-react

2단계: index.html 이동

<!-- public/index.html → index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

3단계: 환경 변수 변경

// Webpack
process.env.REACT_APP_API_URL

// Vite
import.meta.env.VITE_API_URL

4단계: import 경로 수정

// Webpack
import logo from './logo.svg';

// Vite (동일하지만 타입 추가)
import logo from './logo.svg?url';

정리 및 체크리스트

핵심 요약

  • Vite: 차세대 프론트엔드 빌드 도구
  • 빠른 시작: ESBuild로 즉시 시작
  • 빠른 HMR: 네이티브 ESM 활용
  • 간단한 설정: 최소한의 설정
  • 플러그인: 풍부한 생태계

구현 체크리스트

  • Vite 프로젝트 생성
  • 플러그인 설정
  • 환경 변수 설정
  • 빌드 최적화
  • 프록시 설정
  • 배포

같이 보면 좋은 글

  • Bun 완벽 가이드
  • Turborepo 완벽 가이드
  • React 18 심화 가이드

이 글에서 다루는 키워드

Vite, Build Tool, HMR, Rollup, ESBuild, Frontend, Performance

자주 묻는 질문 (FAQ)

Q. Vite vs Webpack, 어떤 게 나은가요?

A. Vite가 훨씬 빠릅니다. 새 프로젝트는 Vite를 권장합니다. 레거시 프로젝트는 점진적 마이그레이션이 가능합니다.

Q. 프로덕션에서 사용해도 되나요?

A. 네, Vite는 안정적이며 Vue, Svelte 등 많은 프레임워크의 공식 빌드 도구입니다.

Q. Webpack 플러그인을 사용할 수 있나요?

A. 아니요, Rollup 플러그인을 사용해야 합니다. 대부분의 Webpack 플러그인에 대응하는 Rollup 플러그인이 있습니다.

Q. IE11을 지원하나요?

A. 기본적으로 지원하지 않습니다. @vitejs/plugin-legacy를 사용하면 지원 가능하지만 권장하지 않습니다.

... 996 lines not shown ... Token usage: 63706/1000000; 936294 remaining Start-Sleep -Seconds 3