CRA vs Vite

 

이번 프로젝트를 시작하면서 frontend webpage를 만들 일이 생겼는데

 

아마도 예전에 인터넷강의에서 학습했던 CRA - Create React App 을 선택했었다.

 

 

어찌저찌 프로젝트가 진행되고 있었는데

server에 배포하고 docker로 build를 날려보니 frontend service의 build가 너무너무 오래걸렸다

 

방법을 찾다보니 vite라는 대체재를 만나게 됬다

vite로 migration을 하니까 build속도가 거진 1/10이 되더라..

 

 

일단 CRA와 Vite가 뭘까?

 

 

CRA(CreateReactApp) 과 Vite는 Build Tool

build tool이 뭘까?

 

웹페이지를 받기 위해서는 server가 우리가 짠 code를 보내줘야 하는데

조금이라도 웹페이지의 코드가 짧고 효율적이어야 웹페이지 전송이 빨라지고 server가 하는 일도 줄어든다

 

개발자가 import해놓고 안쓰는 module 이라던가

export해놓고 안쓰는 function이라던가 를 지워서 코드의 양을 줄여준다

 

또 실제 동작에는 불필요한 괄호를 없앤다거나 긴 변수명을 짧게 바꿔준다거나 와 같은 최적화 작업을 한다

이중에는 Bundler도 포함되어 있다.

 

웹 개발에서 typescript를 많이 쓰는데 실제로 webpage에선 typescript code가 돌아가는건 아니고 javascript code가 돌아간다

typescript를 javascript로 바꿔주는 친구가 필요한데 이 작업도 build tool이 한다

 

 

결론적으로 내가 짠 webpage를 server에서 효율적으로 작동하도록 해주는 자동화 도구라고 할 수 있다.

 

 

Bundler - 왜 전체 코드를 하나의 File로 만들어야 할까?

build tool의 주요기능으로 Bundling이라는 기능이 있는데

여러 파일로 되어 있는 webpage를 하나의 파일로 만들어서 보내주는 기능이다

 

왜 전체 코드를 굳이 하나로 합쳐서 받아와야 할까?

 

그 이유는 network 비용이 많이 들기 때문이다 

배송비라고 생각하면 된다

 

콜라 하나 감자튀김 하나 햄버거 하나를 배송비 3000원인 배달앱에서 따로따로 시키면

햄버거는 6000원인데 (와퍼주니어라고생각하면 그쯤한다) 배송비는 9000원이 들게 된다

다같이 시키면 배송비는 그래도 비싸지만 3000원밖에 들지 않는다

 

 

그래서 CRA보다 Vite가 빠른 이유는?

CRA는 bundling tool로 webpack을 쓰고 Vite는 esbuild+rollup을 쓰는데

 

webpack은 js 기반이고 esbuild는 go 기반이라 속도 차이가 많이난다

애초에 esbuild가 webpack-javascript의 낮은 속도를 개선하려고 만든거라 속도차이가 날수밖에 없다

 

Vite는 development level에서는 esbuild만 쓰기때문에 속도가 엄청나게 빠르고

production level에서는 안정성때문에 rollup을 쓰는데 속도를 위해 esbuild로 의존성 bundling을 전처리 해주고 rollup으로 최종 bundling을 수행한다

따라서 esbuild-rollup hybrid로 속도와 안정성을 모두 챙길 수 있다

 

 

그래서 뭐 써야 할까??

CRA는 2022년부터 update가 없는 사실상 deprecated 상태이다

 

다른  build tool을 쓸지언정 CRA는 더이상 권장하지 않는다

 

 

 

 

https://ko.vite.dev/guide/why.html

Vite

https://velog.io/@eeeve/Bundler-Webpack-Rollup-Vite-Parcel-%EB%A5%BC-%EB%B9%84%EA%B5%90%ED%95%B4%EB%B3%B4%EC%9E%90

Bundler (Webpack, Rollup, Vite, Parcel) 를 비교해보자

https://velog.io/@minboykim/Vite-%EC%99%9C-%EC%93%B0%EB%8A%94%EA%B1%B0%EC%A7%80

Vite, 왜 쓰는거지?

https://www.youtube.com/watch?v=iX3Nu1FcZKA