배경
우리 프로젝트는 Create-react-app, 줄여서 CRA로 부트스트랩되었다. 처음에 이걸로 리액트 앱 만드는거에요~ 라고 배우기도 했고, 이후 별 탈도 없고 그래서 별 거부감 없이 사용하고 있던 터였다.
그렇게 1년가까이 프로젝트를 유지보수하던중, 문득 생각이 든다. "빌드, 너무 오래 걸리는거 아니야?"
곧바로 팀원과 공유해야하는 배포사항이 있을때, 항상 배포중이니 기다리라 하고, 규모가 어느정도 생기고 나선 5분정도 기다려야 한다고 얘기하는걸 어느 순간부터 당연히 느끼고 있었다.
그렇다. 초창기에는 2분정도 걸리던 배포 시간이, 이젠 기어코 5분을 넘어거린 것이다. 심지어 로컬에서 yarn start로 돌려도 웹사이트가 처음 뜨는데 몇초정도 소요되기 시작했다. 인턴할때 리액트로 만들어진 Kibana Dashboard 프로젝트를 로컬에서 기동하는데만 15분여 걸렸던 악몽이 떠오르기 시작하며 "설마 우리도?"라는 생각에 식은땀이 흐르기 시작했다.
미친 속도로 발전하고 멋진 기술이 나오는 현재 프론트엔드 생태계를 볼때 "분명히 빌드 속도를 줄여주는 툴이 어디엔가 있을거야" 라는 생각이 들었고, 검색을 조금만 해보니 바로 봐이트Vite가 등장했다.
Vite?
봐이트가 아니라 비트라고 한다. 그것 말고도 비트의 놀라운 점은 빌드 속도를 비약적으로 줄여준다는 것이다. 어떻게 그러는 걸까?
원리
CRA는 번들링을 위해 Webpack을 사용한다. Vite는 웹팩과 다르게 ESBuild로 바뀌지 않을 dependency에 대한 (사전) 번들링을 진행하고, Native ESM을 사용하여 변화가 잦은 소스 코드를 제공한다. ESBuild는 웹팩에 비해 10~100배는 빠르다.
웹팩같은 경우다. 소스코드가 업데이트되면 번들링을 모두 다시 거쳐야 하기 때문에, 서비스가 커질수록 소스 코드 갱신 시간도 선형적으로 증가한다.
하지만 Native ESM에선 특정 모듈이 수정되면 수정된 모듈만을 교체하고, 브라우저가 요청하면 교체된걸 전달하기만 하면 되어서, HMR(Hot Module Replacement) 갱신 시간에 영향을 끼치지 않는다.
마이그레이션과 결과
해당 커밋에서 마이그레이션을 진행했다.
마이그레이션 방법은 타 블로그들에 정리가 잘 되어있으니 굳이 반복해서 적진 않겠다. 나는 이 블로그를 참고했다.
마이그레이션 후 로컬 서버 실행시 빨라진건 당연하고, 빌드 시간의 변화를 보자.
그렇다! 최대 5분까지 걸리던 빌드 시간이 2분대로 줄어들었다!
참고자료
