이번 원티드 3월 챌린지에 참여하면서 수업 실습 프로젝트에 사용된 Vite를 나도 한번 써볼까? 하는 생각에 사용해보았다.

결론: '이제 CRA로 다시 못 돌아간다' 😂😂

작업하면서 수많은 터미널 껐다켰다 & 화면 리로딩을 반복하게 되는데 Vite가 CRA에 비해 정말 빨랐다. 왜 여태 이걸 안 썼지 싶을 정도다. (CRA 이제 빠빠..)

내친 김에 기존에 CRA로 생성된 프로젝트를 Vite로 마이그레이션 했다. (이 부분은 여기저기를 참고해서 나중에 따로 포스팅)

오늘은 Vite에 대한 간단 소개를 써본다.

Vite는 누가 만들었나요?

Vue 프레임워크 제작자인 Evan You라고 한다.
오... Vue를 만든 사람이 만들었다니 왠지 정감(?)이 간다.

Vite의 장점은?

위에서도 말했지만 CRA에 비해 엄청난 구동 속도이다. 웹팩 기본 셋팅으로 이것저것 설치가 많이 되는 CRA에 비해 Vite는 미리 설치되는 것이 거의 없다고 한다. (= 메모리 덜 잡아먹음)

Vite가 CRA보다 빠른 이유는?

• Vite는 CRA와 달리 웹팩이 아닌 esbuild라는 번들링 프로그램을 사용한다.
• CRA는 코드가 바뀌면 모든 js 코드를 새로 번들링하는데, Vite는 첫 번째 실행에서만 전체를 번들링하고 이후 변경된 부분만 새로 번들링한다.
  => 결과적으로 훨씬 빠른 HMR(Hot Module Reloading) 가능

🚝 Hot Module Reloading이란?
애플리케이션 동작 중에 전체 새로고침 없이 모듈을 변경/추가/제거하는 것

웹팩과 esbuild의 속도가 차이나는 이유는?

1. 웹팩은 Node.js로 만들어졌지만 esbuild는 Go로 만들어졌다.
2. CRA는 개발 서버로 express로 돌리지만, Vite는 더 작은 서버인 koa를 돌린다. (여기서 비롯되는 리소스의 차이)

Vite가 번들링되는 과정은?

• 평소에 Native ESM 모듈로 import나 export 부분을 관찰(watch)하고 있다.
• 그러다가 특정 import나 export 코드가 변경되면 그 부분만 새로 번들링한다.
• 변경되지 않은 모듈은 304 "Not modified"를 반환해서 브라우저가 무시하게 한다.
• commonJS나 UMD 방식도 ESM 방식으로 전환(convert)해서 변경된 부분만 수정하게 한다.