Vite 완벽 가이드 | 초고속 빌드 도구·HMR·Plugins·최적화·실전 활용

2026년 4월 7일 · 13분 읽기 · 수정 2026년 4월 7일 중급

이 글의 핵심

Vite로 초고속 개발 환경을 구축하는 완벽 가이드입니다. ESM, HMR, Plugins, Rollup, React/Vue 통합까지 실전 예제로 정리했습니다.

실무 경험 공유: Webpack에서 Vite로 전환하면서, 개발 서버 시작 시간이 20초에서 1초로, HMR이 5초에서 즉시로 단축된 경험을 공유합니다.

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

실무 문제 시나리오

시나리오 1: 개발 서버 시작이 느려요
Webpack은 전체 번들링을 합니다. Vite는 ESM으로 즉시 시작합니다.

시나리오 2: HMR이 느려요
Webpack은 전체 재빌드합니다. Vite는 변경된 모듈만 교체합니다.

시나리오 3: 설정이 복잡해요
Webpack은 많은 설정이 필요합니다. Vite는 Zero Config입니다.

1. Vite란?

핵심 특징

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

주요 장점:

초고속: ESM 기반
즉시 HMR: 변경 즉시 반영
Zero Config: 기본 설정 완벽
Rollup: 프로덕션 빌드
플러그인: 풍부한 생태계

2. 프로젝트 생성

React

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

Vue

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

Vanilla

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

3. vite.config.ts

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  server: {
    port: 3000,
    open: true,
  },
  build: {
    outDir: 'dist',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
        },
      },
    },
  },
});

4. 환경 변수

.env

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

사용

const apiUrl = import.meta.env.VITE_API_URL;
const appTitle = import.meta.env.VITE_APP_TITLE;

console.log(apiUrl);

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;
}

5. Static Assets

// 이미지
import logo from './logo.png';

<img src={logo} alt="Logo" />

// CSS
import './styles.css';

// JSON
import data from './data.json';

6. Plugins

@vitejs/plugin-react

npm install -D @vitejs/plugin-react

import react from '@vitejs/plugin-react';

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

vite-plugin-pwa

npm install -D vite-plugin-pwa

import { VitePWA } from 'vite-plugin-pwa';

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

7. 최적화

Code Splitting

// Dynamic Import
const Component = lazy(() => import('./Component'));

// Route-based
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));

Rollup Options

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

8. Library Mode

import { defineConfig } from 'vite';
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',
        },
      },
    },
  },
});

9. SSR

// server.js
import express from 'express';
import { createServer as createViteServer } from 'vite';

const app = express();

const vite = await createViteServer({
  server: { middlewareMode: true },
  appType: 'custom',
});

app.use(vite.middlewares);

app.use('*', async (req, res) => {
  const url = req.originalUrl;

  const { render } = await vite.ssrLoadModule('/src/entry-server.tsx');
  const html = await render(url);

  res.status(200).set({ 'Content-Type': 'text/html' }).end(html);
});

app.listen(3000);

정리 및 체크리스트

핵심 요약

Vite: 초고속 빌드 도구
ESM: Native ES Modules
즉시 HMR: 변경 즉시 반영
Zero Config: 기본 설정 완벽
Rollup: 프로덕션 빌드
플러그인: 풍부한 생태계

구현 체크리스트

같이 보면 좋은 글

Webpack 완벽 가이드
Vitest 완벽 가이드
React 완벽 가이드

이 글에서 다루는 키워드

Vite, Build Tools, HMR, ESM, React, Vue, Frontend

자주 묻는 질문 (FAQ)

Q. Webpack과 비교하면 어떤가요?

A. Vite가 훨씬 빠릅니다. Webpack은 더 성숙하고 플러그인이 많습니다.

Q. 프로덕션 빌드는 어떤가요?

A. Rollup을 사용해 최적화된 번들을 생성합니다.

Q. IE11을 지원하나요?

A. 기본적으로는 아니지만, 플러그인으로 가능합니다.

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

A. 네, 많은 기업에서 안정적으로 사용하고 있습니다.