CRA (create React app) 대신 Vite 를 쓰는 이유

그냥 vite를 쓰는 이유

 

를 먼저 요약을 하자면

 

1. 번들링을 생략하기 때문에 서버를 빠르게 구동시킨다.

2. HTTP 상태 코드를 활용하여 리로딩이 더 빠르다.

3. Vite가 설정한 최소한의 config로도 사용이 가능하다.

4. 닥치고 속도차이가 확연히 느껴진다.

 

CRA를 사용해서 React 프로젝트를 많이 생성해 봤을 거다.

React 공식에서도 추천해 주는 보일러 플레이트이기도 하고 많은 유용한 기능들을 제공해 주기 때문이다.

 

 

하지만,

CRA를 쓰다가 Vite를 사용해 보면 속도에 있어서 엄청난 차이를 느껴 볼 수 있다.

 

 

Vite가 빠른 이유

 

왜 그럴까?

 

전의 웹개발방법은 HTML , CSS , JS 이렇게 각각 만들어서 코드를 짜고 서버에 올리면 끝이었다.

그런데 사람들이 자바스크립트 라이브러리를 쉽게 설치할 수 있게 해주는 npm을 사용하기 시작했다.

 

npm 이란? 

자바스크립트 라이브러리를 다 모아놓은 플랫폼이다.

 

npm을 이용해서 라이브러리를 쉽게 설치해 와서 사용할 수 있는데

라이브러리를 설치하면 node_modules라는 폴더가 생성되는데 폴더의 크기가 너무 크다. (몇 10~ 몇 100 mb)

이대로 서버에다가 베포를 해버리면 너무 비효율적 일 수 있다.

 

우리가 의존하고 있는 라이브러리 파일들을 전부다 하나로 합쳐주는 작업을 번들링이라고 한다.

전부 다 가져오는 게 아니라 내가 딱 쓴 코드들만 가져와서 합쳐준다. 

번들링 중 가장 유명한 툴은 웹팩(webpack)이라는 것이 있다.

 

웹팩 간단 설명 참조링크

https://sg-coding.tistory.com/entry/%EC%9B%B9%ED%8C%A9webpack-%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

 

 

근데 문제가 있는데 큰 프로젝트를 진행하고 있어서 라이브러리 수가 많아졌을 때

웹팩으로 번들링을 하게 되면 시잔이 몇 분이 걸리고 실시간 미리 보기만 띄우는데도 시간이 걸린다.

 

그래서 나온 2세대 번들링 툴들이 나오기 시작했는데 그중에 알아볼 것이 바로 vite이다.

 

 

 

CRA 같은 경우 Javascript 코드로 구성된 툴인 Webpack을 사용한다.

Vite는 Esbuild라는 라이브러리 기반으로 만들어졌기 때문에 기존보다 속도가 빠르다.

 

실시간 미리 보기를 띄울 때 수정사항이 하나가 있더라도 웹팩은 번들마다 전부 다시 번들링 했지만

vite는 소스코드는 건들지 않고 변경된 것만 필요한 것만 건드리고 보여주기 때문에 훨씬 빠르다.

 

빌드 최적화와 SSR설정에 대해 지원해주고 있고,

웹팩 설정에 대한 경험이 있다면 vite도 빠르게 구성 가능하다.

 

 

상황에 맞게 사용하기

하지만 리엑트나 뷰처럼 프런트 개발 시에 정말 vite가 속도 빠르고 좋지만,

리엑트와 뷰를 사용하지 않고 npm으로 js  라이브러리형태로 만든 간단한 500줄이 안 되는 js파일을 빌드를 해보면

정말 작은 파일 같은 경우는 vite보다 웹팩이 더 빠르다고 한다. 

그래서 프로젝트의 크기나 사용방식 등 상황에 맞춰서 번들링은 선택하여 유용하게 쓰면 될 것 같다.