Vite를 사용해 React 프로젝트를 설정해야 하는 이유

date

Oct 25, 2024

slug

why-vite

author

status

Public

Vite가 CRA보다 개발 서버가 빠른 이유는?

1. 번들링 방식의 차이

CRA는 Webpack을 이용해 프로젝트를 번들링합니다. 그러나 Webpack은 JavaScript 기반 Node.js로 작성되었기 때문에 성능 면에서 제한이 있습니다. 특히, 코드 변경 시 전체 프로젝트를 다시 번들링하기 때문에, 프로젝트가 커질수록 핫 모듈 리플레이스먼트(HMR) 속도가 느려지는 단점이 있습니다.

반면, Vite는 esbuild를 사용하여 필요한 부분만 번들링합니다. 첫 실행 시 전체 프로젝트를 번들링하지만 이후 변경된 코드만 다시 번들링하기 때문에 속도가 훨씬 빠릅니다.

esbuild의 성능이 좋은 이

Go 언어로 작성: Go는 컴파일된 바이너리로 동작하며, 시스템 자원 활용 면에서 JavaScript보다 효율적입니다.

멀티스레드와 병렬 처리 지원: 여러 파일을 동시에 처리하여 번들링 속도를 극대화합니다.

2. 서버 프레임워크의 효율성

CRA는 개발 서버로 Express를 사용하고, Vite는 Koa를 사용합니다.

Express는 기능이 풍부하지만 무겁고 리소스 소모가 큽니다.

반면, Koa는 경량화된 프레임워크로, 필요한 기능만 추가할 수 있어 더 빠르고 효율적으로 동작합니다.

Vite로 React 프로젝트 설정하기


npm create vite@latest my-project --template react-ts
cd my-project
npm install
npm run dev

위 코드에서 --template 옵션은 원하는 템플릿을 설정할 수 있습니다. 템플릿 선택 가능 항목은 다음과 같습니다:

JavaScript	TypeScript
vanilla	vanilla-ts
vue	vue-ts
react	react-ts
preact	preact-ts
lit	lit-ts
svelte	svelte-ts

주의: Vite는 CRA와 달리 초기 설정에서 npm install이 자동으로 실행되지 않으므로 직접 실행해야 합니다.

Vite의 주요 장점: 트리 쉐이킹(Tree Shaking)

트리 쉐이킹이란?

트리 쉐이킹은 프로젝트에서 사용되지 않는 코드를 제거하여 번들 크기를 줄이고 성능을 최적화하는 기술입니다.

Vite의 트리 쉐이킹 작동 방식

의존성 그래프 생성: Vite는 import/export 문을 정적으로 분석하여 모듈 간의 의존성을 추적합니다.

사용 코드 식별: 의존성 그래프를 통해 실제로 사용되는 코드와 사용되지 않는 코드를 구분합니다.

불필요한 코드 제거: 사용되지 않는 코드를 번들에서 제거합니다.

최적화된 모듈 생성: 모듈 단위로 최적화된 코드를 생성합니다.

코드 스플리팅 지원: 동적 import를 사용해 코드를 청크 단위로 분할하며, 필요한 시점에만 로드합니다.

최적화된 번들 제공: 사용되는 코드만 포함된 가벼운 번들을 생성합니다.

트리 쉐이킹의 장점

성능 최적화: 번들 크기를 줄이고 로드 속도를 개선합니다.

코드 유지보수성 향상: 불필요한 코드를 제거해 프로젝트 구조를 더 깔끔하게 유지할 수 있습니다.

생산성 향상: 코드가 가벼워지면서 HMR과 빌드 시간이 단축됩니다

마무리 정리

Vite는 CRA보다 빠르고 최적화된 개발 환경을 제공합니다. esbuild 기반의 번들링과 Koa의 경량 서버는 개발 속도를 극대화하며, 트리 쉐이킹 및 코드 스플리팅 같은 최신 기술은 프로젝트 성능을 한 단계 더 높여줍니다. 프론트엔드 프로젝트에서 효율성을 중시한다면 이제 CRA 대신 Vite를 사용해보셔도 좋을 것 같습니다.