Vite - react 빌드 도구

1. 개념
2. 특징
3. 사용법
4. 추가

개념

빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구
Vite 이동

특징

• create-react-app의 단점 보완

  • 웹펙에 강한 결속
  • 커스텀이 어려움
  • 느림
  • 최신 업데이트가 없음

• 빠른 개발 서버

  • ES Module 기반: 개발 중 JavaScript 파일을 번들링하지 않고 브라우저의 ES Module 기능을 활용하여 파일을 개별적으로 제공.
  • 즉각적인 핫 모듈 교체(HMR): 코드 변경 사항이 즉시 반영되어 빠른 개발이 가능.

• 최적화된 프로덕션 빌드

  • 내부적으로 Rollup을 사용하여 효율적인 번들링.
  • 사용하지 않는 코드를 제거하는 트리 쉐이킹(Tree Shaking) 기능 제공.
  • 코드를 최적화하여 번들 크기를 줄이고 배포 속도를 향상.

• 간단한 설정

  • 대부분의 설정이 미리 구성되어 있어, 최소한의 설정으로 시작 가능.
  • 복잡한 요구사항이 있다면 플러그인을 통해 확장 가능.

• 플러그인 지원

  • Rollup 플러그인 호환성: Rollup의 다양한 플러그인을 사용할 수 있음.
  • 공식 및 커뮤니티 플러그인을 통해 확장성 제공.

• 다양한 프레임워크 지원

  • React, Vue, Svelte, Lit 등의 다양한 프레임워크를 위한 템플릿을 제공.
  • TypeScript, CSS Preprocessors(Sass, Less 등)도 기본적으로 지원.

  ---

Vite를 사용하는 이유

• 빠른 초기 빌드 시간

  • 기존 번들러(Webpack 등)에 비해 훨씬 빠르게 프로젝트를 초기화하고 시작 가능.

• 효율적인 개발 환경

  • 변경된 파일만 다시 로드하므로 큰 프로젝트에서도 빠른 작업 가능.

• 모던 브라우저 타겟팅

  • 최신 브라우저 기능을 활용하여 성능 향상.

• 생태계와의 호환성

  • Rollup 플러그인 및 기타 모듈과 호환이 잘 되어 다양한 확장이 가능.

사용법

1. 프로젝트 초기화
   npm create vite@latest my-project -- --template react

2. 디렉터리 이동 및 종속성 설치
   cd my-project
npm install

3. 개발 서버 실행
   npm run dev

4. 프로덕션 빌드
   npm run build

추가