Vite: 빠르고 효율적인 현대적 프론트엔드 빌드 툴

Vite: 빠르고 효율적인 현대적 프론트엔드 빌드 툴

• https://ko.vite.dev/guide/

• Vite는 프론트엔드 개발 환경 에서 빠르고 효율적인 빌드 및 개발 서버를 제공하는 툴입니다.

• Vue.js의 주요 기여자인 에반 유(Evan You)가 개발했으며, 현대적 웹 애플리케이션 개발을 위해 설계되었습니다.

주요 특징

• 1. 빠른 개발 서버:
  • 브라우저 네이티브 ESM(ES Modules)을 사용하여 개발 서버의 속도를 극대화합니다. 코드를 번들링하지 않고 필요할 때만 모듈을 로드합니다.
• 2. 빠른 빌드:
  • Rollup 기반의 프로덕션 빌드와 esbuild를 활용한 빠른 종속성 처리로 최적화된 빌드 성능을 제공합니다.
• 3. 핫 모듈 리플레이스먼트(HMR):
  • 코드 변경 시 전체 페이지를 다시 로드하지 않고 변경된 모듈만 빠르게 갱신합니다.
• 4. 유연성:
  • Vue, React, Preact, Lit, Svelte 등 다양한 프레임워크와 호환되며 플러그인을 통해 확장이 가능합니다.
• 5. 경량화:
  • 설정 파일이 단순하고 프로젝트 초기화 및 설정이 간편합니다.

---

설치 및 사용

1. 프로젝트 생성

   npm create vite@latest
   

   또는

   yarn create vite
   

2. 의존성 설치

   npm install
   

   또는

   yarn install
   

3. 개발 서버 실행

   npm run dev
   

4. 프로덕션 빌드

   npm run build
   

---

기본 설정 파일: vite.config.js / vite.config.ts

javascript

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

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
  },
});

view raw vite.ko.md hosted with ❤ by GitHub