[React] 리액트 프로젝트 생성 - Create React App 보다 더 빠른 Vite 사용하기

보통 리액트에서 간단한 프로젝트를 생성하기 위해 가장 많이 사용하는 것은 Create React App 즉 CRA다.

 

그러나 CRA는 단점이 있는데, 바로 속도가 느리다는 것이다. 심지어 프로젝트 크기가 커질 수록 더 느려진다.

 

오늘은 Vite가 무엇인지 알아보고, 왜 Create React App을 사용했을 때 보다 더 빠른지 그리고 얼마나 빠른지 살펴보도록 하자.

---

Vite란?

Vite는 다른 번들러 기반의 빌드툴의 비효율적이고 느린 문제를 해결하기 위해 고안된 빌드툴이다.

 

여기서 느리다는 것은 크게 서버 시작에 걸리는 시간과 느린 업데이트 시간을 말한다.

 

1. 느린 dev 서버 시작 시간

dev 서버를 시작할 때, 번들러 기반의 빌드 설정은 열심히 크롤링하고 전체 앱 빌드를 마쳐야한다.

 

반면 Vite는 앱의 모듈을 dependencies와 source code 두 가지 카테고리로 먼저 나눠 dev 서버가 더 빠르게 시작되도록 한다.

 

우선 dependencies 파일 측면에서 살펴보면 Vite는 pre-bundles dependencies로 esbuild를 사용하는데, 이 esbuild는 Go 언어로 작성되어 JavaScript 기반의 번들러보다 10-100배 정도 더 빠르다.

 

source code는 JSX나 CSS 등과 같이 자주 변경되는 파일을 포함한 non-plain 자바스크립트로, 모든 source code가 반드시 동시에 로딩될 필요는 없다.

 

Vite는 native ESM을 사용해 source code를 제공하는데, 브라우저에게 번들러 일부의 일을 넘겨, Vite는 브라우저가 요청 시 source code를 변환하고 제공하기만 하면 된다.

 

2. 느린 업데이트

번들러 기반의 빌드 설정에서는 파일 변경시 전체 번들을 재빌드하는 비효율적인 문제가 있다.

 

이를 해결하기 위해 Hot Module Replacement (HMR)를 지원하는 번들러도 있지만 여전히 애플리케이션의 사이즈가 커질수록 속도가 느려지는 문제가 발생한다.

 

Vite에서는 native ESM를 통해 HMR를 수행해서, 파일이 변경되면 가장 가까운 HMR boundary (대부분의 경우에는 해당 모듈 자체) 사이의 체인만 무효화해, 애플리케이션의 크기에 상관없이 빠른 속도를 유지한다.

 

---

Vite로 새로운 리액트 프로젝트 생성하기

공식 문서

아래 명령어를 실행한다. (주의: Node.js 버전이 14.18 이상 혹은 16 이상이어야함.)

npm create vite@latest

그런 다음 프로젝트 이름을 입력하고, 방향키를 사용해 React를 선택한 후 엔터키를 누른다.

JavaScript와 TypeScript 중 원하는 언어를 선택한다.

이제 프로젝트가 생성되었으니 위 명령어를 입력해 노드 패키지를 설치하고 dev 서버를 시작해보자.

내 컴퓨터에서는 설치 16초, dev 서버 시작 3.5초가 소요되었다.

 

 

그렇다면 CRA를 사용했을 때는 얼마나 걸릴까?

npx create-react-app my-app 으로 리액트를 생성한 결과 프로젝트 생성 + 패키지 설치까지 약 1분, dev 서버 시작까지 1분 8초가 걸렸다.

	Vite	Create React App
프로젝트 생성 + 설치	16초 (약 4배 빠름)	약 60초
dev 서버 시작	3.5초 (약 20배 빠름)	68초

---

 

다음 글에서는 기존 CRA로 생성한 프로젝트를 Vite로 마이그레이션하는 방법을 알아보자

[React] CRA로 생성한 프로젝트 Vite로 마이그레이션하기 (타입스크립트)

---

출처

- [Vite Docs] Why Vite