애플리케이션이 발전함에 따라 처리해야하는 javascript 모듈의 갯수가 계속해서 급상승하고 있다.
Vite는 이러한 것에 초점을 맞춰, 브라우저에서 지원하는 ES Modules(ESM) 및 네이티브 언어로 작성된 JavaScript 도구 등을 활용해 문제를 해결하고자 합니다.
이 방식은 페이스북에서 개발한 공식 보일러 플레이트이며 webpack, babel 등으로 구성되어있다.
소스코드를 갱신할 때 기존 번들링 방식은 전체를 다시 번들링했는데
vite를 통한 갱신은 모듈과 관련된 부분만을 교체해 앱 사이즈가 커져도 빠르게 번들링 가능하다 .
만들어진 Vite 프로젝트를 유심히 보면 index.html
파일이 public
디렉터리가 아닌 프로젝트의 루트에 위치해 있다는 것을 발견할 수 있습니다. 의도적으로 이렇게 위치시킨 것인데, 추가적인 번들링 과정 없이 index.html
파일이 앱의 진입점이 되게끔 하기 위함입니다.
Vite는 index.html
파일을 소스 코드이자 JavaScript 모듈 그래프를 구성하는 요소 중 하나로 취급하고 있습니다.
다시말해, <script type="module" src="...">
태그를 이용해 JavaScript 소스 코드를 가져온다는 의미이며, 인라인으로 작성된 <script type="module">
이나 <link href>
와 같은 CSS 역시 Vite에서 취급이 가능합니다.
CRA와 다르고 약한 첫 번째 포인트는 모든 JSX 파일에서 React의 중요성입니다. 아시다시피 CRA 버전 17에서는 React의 중요성을 CRA에서 처리하므로 모든 파일에서 React를 가져올 필요가 없습니다. 안타깝게도 Vite에서는 여전히 모든 JSX 파일에서 React를 가져와야 합니다. 이 문제를 처리하는 경로는 vite.config.js
파일로 직접 이동합니다.
vite로 프로젝트 생성해보기