cra
cra(create-react-app)는 react를 처음 접하면서 webpack, babel 설정을 포함한 react템플릿을 구성해주는 도구이다.
처음엔 너무 편리해서 모든 프로젝트를 cra로 사용했지만 팀 프로젝트가 점점 커질수록 프로젝트 실행 속도가 눈에 띄게 느려지고 로컬서버로 띄우는데 1분 이상 걸리게 됐다.
더 큰 문제는 build속도인데 배포직전 문제가 생겨서 급하게 수정하고 다시 build하는 상황이 벌어지니까 build속도가 느린게 너무 답답했다.
Vite
기존 cra프로젝트는 webpack 번들러를 이용해서 번들링을 했는데 vite의 esbuild는 javascript가 아닌 go로 작성되어서 더 빠른 속도를 보여준다고 한다. 또한 여러 최적화를 통해서 10배~100배까지 빠르다고 하니 군침이 돌아서 기존 프로젝트에 사용해보았다.
참고 블로그 해당 블로그에서 마이그레이션 과정을 확인할 수 있다.
개발서버 시작, build속도 개선
실제로 1분 이상 걸리던 개발서버 시작이 1초로 개선됐다..
CRA프로젝트 개발서버 띄우는 시간
vite로 변경 후 걸리는 시간
CRA프로젝트 build시간
vite build시간
build 시간도 눈에 띄게 줄어들어서 효과가 확실했다..
후기
효과가 너무 좋았기때문에.. 정말 작은 프로젝트가 아니라면 앞으로 cra가 아닌 vite를 사용하려고 한다.
cra -> vite로 변경하는 작업과정 또한 어렵지 않기 때문에 필요하다면 기존 프로젝트도 vite로 리팩토링을 진행할까 한다.
참고
프론트엔드 개발자