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

· 15분 읽기 · 수정 중급
[2026] Vite 완벽 가이드 | 초고속 빌드 도구·HMR·Plugins·최적화·실전 활용

이 글의 핵심

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

다음은 간단한 bash 코드 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.

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

다음은 typescript를 활용한 상세한 구현 코드입니다. 필요한 모듈을 import하고. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

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 타입

아래 코드는 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

아래 코드는 typescript를 사용한 구현 예제입니다. 필요한 모듈을 import하고. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

// 이미지
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

아래 코드는 typescript를 사용한 구현 예제입니다. 필요한 모듈을 import하고. 코드를 직접 실행해보면서 동작을 확인해보세요.

import react from '@vitejs/plugin-react';
export default defineConfig({
  plugins: [react()],
});

vite-plugin-pwa

npm install -D vite-plugin-pwa

아래 코드는 typescript를 사용한 구현 예제입니다. 필요한 모듈을 import하고. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

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

아래 코드는 typescript를 사용한 구현 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.

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

Rollup Options

아래 코드는 typescript를 사용한 구현 예제입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

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

8. Library Mode

다음은 typescript를 활용한 상세한 구현 코드입니다. 필요한 모듈을 import하고, 에러 처리를 통해 안정성을 확보합니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

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

다음은 typescript를 활용한 상세한 구현 코드입니다. 필요한 모듈을 import하고, 비동기 처리를 통해 효율적으로 작업을 수행합니다, 에러 처리를 통해 안정성을 확보합니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

// 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: 프로덕션 빌드
  • 플러그인: 풍부한 생태계

구현 체크리스트

  • Vite 프로젝트 생성
  • 기본 설정
  • 환경 변수 설정
  • Plugins 추가
  • Code Splitting
  • 최적화
  • Library Mode
  • SSR

같이 보면 좋은 글

  • 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. 네, 많은 기업에서 안정적으로 사용하고 있습니다.

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