React 프로젝트에 Create-React-App보다 Vite를 선호하는 이유

소개

Vite 및 CRA(Create-React-App)는 더 빠른 개발자 경험을 제공하는 프런트엔드 애플리케이션용 빌드 도구입니다. 그들은 응용 프로그램의 개발 및 배송 시간을 크게 줄이는 즉시 사용 가능한 많은 기능을 제공합니다. 로컬에서 앱을 개발하기 위한 로컬 개발 서버를 제공하고 프로젝트 배송을 위해 최적화된 프로덕션 빌드를 수행하는 기능도 제공합니다.

주요 차이점

CRA는 스캐폴딩 반응 응용 프로그램에만 사용됩니다.

Vite는 바닐라 JS, Vue, React 등의 스캐폴딩 응용 프로그램에 사용할 수 있습니다.

CRA 및 Vite for React 작업

손을 더럽히고 직접 테스트해 봅시다. 모든 명령은 vs code bash 터미널에서 실행됩니다.

NPM 캐시 지우기

먼저 비교에 들어가기 전에 아래 명령을 실행하여 npm 캐시를 지우겠습니다.

$ npm cache clean --force

처음부터 시작하기 위해 npm 캐시를 지우고 있습니다. 그렇지 않으면 캐시에 저장된 패키지가 앱을 스캐폴딩하는 동안 사용될 수 있으므로 타이밍이 단축됩니다.

Create-React-App

앱 스캐폴딩:

이제 CRA를 사용해 봅시다. 터미널을 열고 다음 명령을 실행하여 CRA 패키지를 전체적으로 설치합니다.

$ npm i -g create-react-app 

이제 아래 명령을 실행하여 반응 앱을 만듭니다.

$ time npx create-react-app cra-demo

time Linux의 명령은 다음 명령의 경과 시간 세부 정보를 표시합니다. 이 명령은 vs code bash 터미널에서도 작동합니다.

명령 실행이 끝나면 마지막에 소요된 시간을 볼 수 있습니다.



따라서 CRA를 사용하여 앱을 생성하는 경우 경과 시간은 1 minute and 50 seconds (110s)입니다.

프로덕션 빌드:
앱을 변경하지 않고 빌드 명령을 실행하여 프로덕션 번들 크기를 확인하겠습니다.

$ npm run build

프로덕션 빌드는 build 디렉토리에서 사용할 수 있습니다. 아래 명령어로 build 폴더의 크기를 확인해보자.

$ du -sh build

생산 번들 크기는 586K 입니다.
이제 Vite로 이동하겠습니다.

Vite 사용:

앱 스캐폴딩:

vite를 실행하기 전에 위에서 사용한 명령어로 다시 한 번 npm 캐시를 정리합시다.

이제 아래 명령을 사용하여 반응 앱을 만들어 보겠습니다.

$ time npm create vite@latest vite-demo -- --template react

엄청난! 4.5s 에서 앱을 스캐폴딩했습니다. 하지만 기다려! 아직 끝나지 않았습니다. Vite는 종속성을 설치하지 않고 앱을 스캐폴딩합니다. 종속성을 설치하려면 명령을 하나 더 실행해야 합니다.

$ cd vite-demo
$ time npm install

설치 시간을 측정하고 확인해 봅시다.



다시 한 번 대단해! 종속성을 설치하는 데 15초밖에 걸리지 않았습니다. 전체적으로 VIte는 반응 앱을 스캐폴딩하는 데 대략 20 seconds 걸렸습니다. 시간이 크게 단축되었습니다.

프로덕션 빌드:

앱을 변경하지 않고 빌드 명령을 실행하여 프로덕션 번들 크기를 확인하겠습니다.

$ npm run build

프로덕션 빌드는 dist 디렉토리에서 사용할 수 있습니다. 이제 아래 명령을 사용하여 빌드 폴더의 크기를 확인하십시오.

$ du -sh dist

프로덕션 번들 크기는 165K로 React에서 생성한 프로덕션 빌드의 1/3도 되지 않습니다.
번들 크기가 작을수록 브라우저에서 앱을 더 빠르게 렌더링합니다.

요약

더 나은 이해를 위해 조사 결과를 표로 요약해 보겠습니다.


반응 앱 만들기(CRA)
초대


반응 앱을 스캐폴딩하는 데만 사용할 수 있습니다.
바닐라 js, vue, 반응 등을 스캐폴딩하는 데 사용할 수 있습니다.

Typescript를 지원합니다
Typescript를 지원합니다

프로젝트를 만드는 데 걸리는 시간은 110s입니다.

프로젝트를 만드는 데 걸리는 시간은 20s입니다.

프로덕션 빌드는 기본적으로 build 폴더에서 사용할 수 있습니다.
프로덕션 빌드는 기본적으로 dist 폴더에서 사용할 수 있습니다.

생산 번들 크기는 586K입니다.

생산 번들 크기는 165K입니다.

결론

위의 표에서 볼 수 있듯이 Vite가 확실한 승자입니다. 따라서 저는 CRA보다 Vite를 선호합니다. 아래에 귀하의 의견을 적어 주십시오.