Create React App(CRA)와 Vite 비교(웹팩과 바벨 포함)

김현준·2024년 7월 11일
0

리액트 이모저모

목록 보기
13/27

Create React App (CRA)

특징

  • 설정 자동화:
    CRA는 리액트 애플리케이션을 설정하는 가장 간단한 방법 중 하나로, 개발에 필요한 기본적인 설정을 자동으로 해준다.

  • 바벨과 웹팩 포함:
    CRA는 바벨과 웹팩을 기본적으로 포함하여 별도의 설정 없이도 최신 자바스크립트 문법과 모듈 번들링을 지원한다.

  • 개발 환경:
    CRA는 기본적으로 설정된 개발 서버와 핫 리로딩 기능을 제공한다.

장점

  • 설정이 매우 간단하여 빠르게 프로젝트를 시작할 수 있다.
  • 바벨과 웹팩을 기본적으로 포함하여 다양한 자바스크립트 문법과 모듈 번들링을 지원한다.
  • 강력한 커뮤니티 지원과 풍부한 문서 제공.

단점

  • 설정을 커스터마이징하려면 eject 명령어를 사용해야 하며, 이는 복잡하고 번거로울 수 있다.
  • 빌드 속도가 상대적으로 느릴 수 있다.

Vite

특징

  • 빠른 개발 서버:
    Vite는 매우 빠른 개발 서버를 제공하여 빠른 핫 모듈 교체(HMR) 기능을 제공한다.
  • 최신 ES 모듈 사용:
    Vite는 최신 브라우저 환경에서 직접 ES 모듈을 사용하여 트랜스파일링 과정이 필요 없다.
  • 간단한 설정:
    기본적인 설정이 매우 간단하며, 필요에 따라 확장할 수 있다.
  • ESBuild 사용:
    바벨 대신 ESBuild를 사용하여 빠른 트랜스파일링을 제공한다.

장점

  • 매우 빠른 개발 서버와 빌드 속도.
  • 설정이 간단하고 필요에 따라 쉽게 확장 가능.
  • ESBuild를 사용하여 빠른 트랜스파일링 제공.

단점

  • 비교적 새로운 도구로, CRA에 비해 커뮤니티와 문서가 상대적으로 적을 수 있다.
  • 매우 커스터마이징된 설정이 필요한 경우 다소 제한적일 수 있다.

CRA와 Vite 비교 요약표

특징Create React App (CRA)Vite
설정 자동화기본적인 설정 자동화간단한 설정 제공
번들러웹팩(Webpack)자체 번들러
트랜스파일러바벨(Babel)ESBuild
개발 서버기본 제공, 상대적으로 느림매우 빠른 개발 서버 제공
핫 모듈 교체(HMR)기본 제공매우 빠른 핫 모듈 교체 제공
설정 커스터마이징eject 명령어 필요, 번거로울 수 있음간단하고 유연한 설정 확장 가능
커뮤니티 지원강력한 커뮤니티와 풍부한 문서 제공비교적 새로운 도구로, 커뮤니티와 문서가 적을 수 있음

CRA와 Vite의 속도 차이

Vite와 CRA의 속도 차이를 숫자로 비교하면, 구체적인 환경과 프로젝트 규모에 따라 다르지만, 일반적으로 Vite가 몇 배 더 빠르다는 것을 확인할 수 있다.

여러 벤치마크에서 나타난 차이를 기준으로 평균적인 속도 차이를 다음과 같이 나타낼 수 있다.

1. 개발 서버 시작 시간

  • Vite: 보통 300ms에서 500ms 사이에 개발 서버가 시작
  • CRA: 5초에서 10초 정도 걸릴 수 있다.
  • 차이: 약 10배에서 20배 더 빠름

2. Hot Module Replacement (HMR) 속도

  • Vite: 50ms에서 100ms 정도로 파일이 변경되면 거의 즉각적으로 반영된다.
  • CRA: 1초에서 2초 정도 걸릴 수 있다.
  • 차이: 약 10배 더 빠름

3. 빌드 속도

  • Vite (프로덕션 빌드): 프로젝트 규모에 따라 다르지만, 중소형 프로젝트 기준으로 10초에서 30초 정도 걸린다.
  • CRA (프로덕션 빌드): 동일한 프로젝트에서 30초에서 1분 정도 걸릴 수 있다.
  • 차이: 약 2배에서 3배 더 빠름

요약

  • 개발 서버 시작: Vite는 CRA보다 10배에서 20배 더 빠름.
  • HMR 속도: Vite는 CRA보다 10배 더 빠름.
  • 프로덕션 빌드 속도: Vite는 CRA보다 2배에서 3배 더 빠름.
profile
기록하자

0개의 댓글

관련 채용 정보