CRA 와 Vite 의 차이

 

React를 배우다 보면 CRA(Create React App)과 Vite , Webpack 등 여러 가지 웹 개발 도구들을 볼 수 있는데

 

이번에는 CRA와 Vite의 차이를 알아보려고 합니다.

 

 

CRA(Create React App)

CRA은 Facebook에서 제공하는 React 애플리케이션을 빠르게 개발하기 위한 공식적인 도구입니다.

또한 Webpack과 Babel 같은 여러 도구들이 함께 내장되어 여러 기술들의 이해도가 조금 부족하더라도 React 프로젝트를 시작할 수 있습니다.

개발 서버를 제공하여 실시간으로 변경된 내용을 확인할 수 있습니다. HMR(Hot Module Replacement) 도 포함되어 있습니다.
번들링과 빌드 과정이 자동화되어 있어 명령어 하나로 실행이 가능합니다.

 

빠른 시작

npx create-react-app my-app

 

여러 템플릿 또한 제공하고 있습니다.

npx create-react-app my-app --template typescript // 타입스크립트

npx create-react-app my-app --template cra-template-pwa // pwa

 

https://create-react-app.dev/

Create React App

 

Vite

vite는 프랑스어로 빠르다는 의미를 뜻합니다.

vite는 다목적으로 사용된 프론트엔드 빌드 도구이며, Vue.js, React 등 다양한 프레임워크에서 사용할 수 있도록 되어있습니다.

ES 모듈 기반으로 만들어져 있어 import 통한 개발 중 필요한 것만 로드해서 초기 빌드 및 재로딩 시간이 단축됩니다.

vite 또한 HMR(Hot Module Replcaement)를 지원하여 수정된 모듈만 다시 로드하여 수정사항을 실시간으로 반영해 줍니다.

설정이 간단하고 Typescript을 기본적으로 지원하고 있습니다.

또한 여러 가지의 플러그인 이 존재하여 기능을 확장시킬 수 있습니다.

 

설치

npm create vite@latest my-react-app -- --template react

 

템플릿

 

https://ko.vitejs.dev/

Vite

 

CRA와 Vite의 차이

빌드시간

CRA와 Vite는 빌드의 시간차이가 존재합니다.

CRA는 Webpack 기반으로 애플리케이션을 빌드하고 있습니다.

Vite는 빠른 빌드 시간을 제공하기 위해 Rollup으로 애플리케이션을 빌드합니다.

 

HMR

CRA 도 HMR을 지원하지만 구조와 방식이 달라 Vite는 최신 기술을 활용하여 더 쁘라고 경량화되어 속도가 더 빠릅니다.

 

번들링

CRA는 Webpack을 사용하여 번들링 하여 번들 사이즈가 매우 큽니다.

Vite는 Rollup과 Esbuild을 사용하여 번들링이 속도가 매우 빠르고 크기가 최적화됩니다.

 

 

 

 

 

참고사이트

https://ko.vitejs.dev/guide/why.html

Vite