📑 Vite소개 - https://ko.vite.dev/
Vite
Vite, 프런트엔드 개발의 새로운 기준
ko.vite.dev
Vite는 차세대 프론트엔드 툴로 빠른 개발 서버와 빠른 번들링을 제공합니다.
👍 [ 더 빠른 서버 개발, 모던한 설계와 최적화 ]
네이티브 ES Module을 넘어 더욱 다양한 기능을 제공한다.
- 번들링 없이 모듈을 바로 브라우저에서 로드한다.
- 개발 서버를 실행할 때 Vite는 전체 프로젝트를 번들링하지 않고 필요한 파일만 서버에서 제공하므로 서버 시작 속도가 매우 빠르다.
- 핫 모듈 교체(HMR : 코드를 수정하면 페이지를 새로 고침하지 변경된 부분만 즉시 반영 ) 성능도 Vite가 CRA보다 훨씬 빠릅니다.
- 최신 브라우저의 ES Module을 활용하여 번들링에 의존하지 않고 빠른 로딩을 지원하며 최신 JavaScript 기능을 적극적으로 활용하여 성능을 극대화한다. 또한 Vite는 코드 분할, 트리 쉐이킹(Tree-shaking), 캐싱 등 최신 최적화 기법을 자동으로 적용하여 성능을 극대화한다.
* Vite는 플러그인 시스템이 간편하게 되어 있어 추가적인 최적화와 확장이 더 쉽게 가능하다.
👊 [ 더 빠른 빌드 성능 ]
번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있습니다. 이는 높은 수준으로 최적화된 정적(static) 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정(Pre-configured)을 제공합니다.
- Rollup을 사용하여 프로덕션 빌드를 진행하며 빌드 과정에서 ESM 기반 코드 분할을 자동으로 처리한다.
- 빌드 프로세스는 매우 최적화되어 있어 대규모 프로젝트에서도 빌드 시간이 CRA에 비해 훨씬 짧다. 또한 빌드된 결과물 역시 더 가볍고 최적화되어 배포된다.
✅ CRA에서 Vite를 지향하는 이유?
1 .CRA는 Webpack을 빌드 도구로 사용한다. Webpack은 프로젝트의 모든 모듈을 한 번에 번들링한 후 개발 서버를 시작하기 때문에 프로젝트가 커질수록 초기 서버 시작 시간과 새로고침 시간이 점점 느려진다.
2.CRA는 Webpack을 사용하여 모든 파일을 하나로 번들링한다. 이는 프로젝트가 클 경우 빌드 시간이 매우 길어지며 특히 코드 분할이 잘 되어 있지 않다면 초기 로딩 시간도 길어질 수 있다.
3. CRA는 Webpack을 중심으로 한 오래된 구조를 따르고 있어 성능 최적화에 한계가 있다. Webpack은 복잡한 설정과 긴 빌드 시간 문제로 인해 특히 최신 자바스크립트 생태계의 요구사항을 따라가는 데 어려움이 있다.
💻 프로젝트 생성하기
# npm
npm create vite@latest
# yarn
yarn create vite
# pnpm
pnpm create vite
# bun
bun create vite
# 명령어 입력 후 아래와 같이 원하는 설정을 선택하면 된다.
> npx
> create-vite
# 1 프로젝트 이름 설정
✔ Project name: … vite-react-app
# 2 framework 설정
? Select a framework: › - Use arrow-keys. Return to submit.
Vanilla
Vue
❯ React
Preact
Lit
Svelte
Solid
Qwik
Others
# 3 variant 설정
? Select a variant: › - Use arrow-keys. Return to submit.
TypeScript
TypeScript + SWC
❯ JavaScript
JavaScript + SWC
Remix ↗
📚 Vite 프로젝트 구조
my-react-app
│
├─ node_modules
├─ public
│ └─ vite.svg
│
├─ src
│ ├─ assets
│ ├─ App.jsx
│ ├─ App.css
│ ├─ index.css
│ └─ main.jsx
│
├─ index.html
├─ package.json
├─ vite.config.js
└─ README.md
'React.js' 카테고리의 다른 글
| [React.JS] 소개 (0) | 2025.10.25 |
|---|