주의:
프로젝트 구성의 차이와 명령을 실행하는 데 걸리는 시간을 측정하지 않는 경우 time명령어를 사용하였습니다.
그러하므로, 결과에 오류가 있을 수 있습니다. 🙇🏻‍♂️
피드백 환영합니다.

들어가기 전

이전 글에서 동일한 프로젝트를 webpack과 vite로 구성하고 성능을 비교하겠다고 하였는데, 문득 궁금해져서 CRA도 포함 하였습니다.

측정 대상

• COLD START
• BUILD TIME
• SIZE

구현 화면

tailwindcss 와 recoil를 사용하여 간단한 TODO APP을 만들어 보았습니다.

코드는 아래를 참고해주세요.

• todo-webpack
• todo-vite
• todo-cra

COLD START

프로젝트 실행에 사용한 명령어

# todo-webpack
$ npm run dev 

# todo-vite
$ npm run dev 

# todo-cra
$ time npm run start 

결과 비교 표

	todo-webpack	todo-vite	todo-cra
1	2452 ms	237 ms	2100 ms
2	2264 ms	252 ms	2000 ms
3	2461 ms	242 ms	2000 ms

측정 화면

BUILD TIME

프로젝트 빌드에 사용한 명령어

# todo-webpack
$ npm run build

# todo-vite
$ time npm run build

# todo-cra
$ time npm run build 

결과 비교 표

	todo-webpack	todo-vite	todo-cra
1	5.08 s	4.10 s	8.13 s
2	5.19 s	4.09 s	8.68 s
3	5.94 s	4.04s	8.87s

측정 화면

SIZE

비교 표

todo-webpack	todo-vite	todo-cra

느낀점

todo-webpack은 세팅하는데 시간을 많이 잡아먹은 것에 비하여 todo-cra와 큰 차이가 없었다.
"내가 설정을 잘못 한것인가..? 아니면 CRA에서 최적화를 잘 한건가..?" 생각했는데 아마 후자이지 않을까..
그래도 webpack을 사용하는 곳이 압도적으로 많으니 꾸준히 학습해야겠다고 느꼈다.

todo-vite는 우선 직접 구성하지 않아도 되서 편했고 서버실행/빌드속도가 압도적으로 빨라서 놀랐다.
간단한 TODO APP이기에 커스텀 할 일이 없었기도 하고 단점도 분명 있을테지만 앞으로 토이 프로젝트에 vite를 사용하게 될듯하다.

이번 경험으로 회사나 개인 프로젝트에 CRA를 쓸일은 없는건 확실해졌고 누군가에게 리액트를 알려줄때 쓰게 될듯?