Vite란?
- 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구
- javascript 의 요구사항인 개발환경과 배포환경 빌드에 초점을 둔다.
- Webpack, Rollup그리고 Parcel과 같은 도구는 이런 번들링 작업을 진행해줌으로써 프론트엔드 개발자의 생산성을 크게 향상시킴
- 개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공. ex. Hot Module Replacement (HMR)
- 번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있습니다. 이는 높은 수준으로 최적화된 정적(Static) 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정(Pre-configured)을 제공합니다.
- 번들링 시, Rollup 기반의 다양한 빌드 커맨드 사용 가능하며, 최적화된 정적 리소스 배포가 가능하다.
- pre-configured 제공으로 편리하다.
애플리케이션이 발전함에 따라 처리해야하는 javascript 모듈의 갯수가 계속해서 급상승하고 있다.
Vite는 이러한 것에 초점을 맞춰, 브라우저에서 지원하는 ES Modules(ESM) 및 네이티브 언어로 작성된 JavaScript 도구 등을 활용해 문제를 해결하고자 합니다.
Create-React-App 과 다른 점
이 방식은 페이스북에서 개발한 공식 보일러 플레이트이며 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에서 취급이 가능합니다.
Vite의 약점
CRA와 다르고 약한 첫 번째 포인트는 모든 JSX 파일에서 React의 중요성입니다. 아시다시피 CRA 버전 17에서는 React의 중요성을 CRA에서 처리하므로 모든 파일에서 React를 가져올 필요가 없습니다. 안타깝게도 Vite에서는 여전히 모든 JSX 파일에서 React를 가져와야 합니다. 이 문제를 처리하는 경로는 vite.config.js파일로 직접 이동합니다.
vite로 프로젝트 생성해보기
