Youtube - Vite Crash Course | Faster Alternative To CRA
Blog - Vite Crash Course & Vite vs CRA
최신 브라우저들이 지원하는 native ES Modules를 사용한다.
-> 서버 시작 전에 모든 리소스를 번들링하지 않는다.
-> Vite는 요청이 있을 때, 해당 코드를 전달하기만 하면 된다.
서버 시작 전, esbuild를 이용해서 리소스들을 pre-bundle하고 바로 code-splitting을 한다.
-> esbuild가 GO로 작성됐기 때문에 JS를 기반으로한 번들러보다 10-100x 더 빠르다.
모듈을 잘 변하지 않는 Dependencies와 자주 변하는 Source code로 나눈다.
Source code도 모두 한 번에 로드될 필요가 없기 때문에 route 등에 따라 code-splitting이 더 진행된다.
Hot Module Replacement (HMR)가 native ES Modules을 통해 이루어진다.
-> 파일 수정 시, 현재 수정한 모듈과 가장 가까운 HRM 바운더리만 무효화시킨다.
HTTP 헤더를 통한 전체 페이지 reload 속도 증가
-> source codes - 304 Not Modified
, dependency module - Cache-Control: max-age=31536000,immutable
를 통해 캐싱
Blog - Vite Crash Course & Vite vs CRA
사실 Vite가 한 것은 새로운 기술을 개발한 것도 아니고 최신 기술을 적용한 것도 아니다. 노후화된 기술을 떼어내고 적용할 수 있는, 이제는 어디서나 사용 가능한 기술을 대입한 것이다. 물론, 이러한 접근법 자체가 어렵다고 할 수 있다. 하지만, 더 고도화가 아닌 다른 접근법으로 더 나은 성과를 낼 수 있는 방법은 없을까라는 생각을 가끔, 아니 생각보다 자주 해야 하는 것 같다.
Vite 공식 문서
Youtube - Vite Crash Course | Faster Alternative To CRA
Blog - Vite Crash Course & Vite vs CRA