제대로 알고 사용하기 위해
Vite를 말 하기 전 기존에 사용했던 CRA란
npx create-react-app '프로젝트명'으로 React를 사용한 프로젝트 환경을 알아서 셋팅해주는 것이라 생각하면 됩니다.
- public 디렉토리에 index.html과 logo, favicon 등의 static asset 및 기본적인 리액트 코드(index.js, app.js) 설정
- webpack, babel, eslint, jest 등 리액트 개발에 필요한 각종 환경설정
- react, react-dom, react-scripts 등 각종 라이브러리 설치
- react-scripts를 사용하여 package.json에 npm command 정의
...
Vite 왜 사용할까?
위에서 말한 CRA은 webpack이라는 번들러를 사용하는데,
번들러의 중요 역할은 JavaScript의 여러 모듈들을 하나의 파일로 모으는 것 입니다.
이때, 번들러의 문제점은 느린 빌드 속도였다.
소스 코드를 업데이트 하게 되면 번들링 과정을 다시 거쳐야 했었다. 따라서 서비스가 커질수록 소스 코드 갱신 시간 또한 선형적으로 증가하게 되었습니다.
이러한 불편함으로 Vite를 사용하게 됩니다.
Vite란
Vite는 ES 모듈과 함께 esbuild, HMR(Hot Module Replacement) 을 사용해 더욱 빠르고 효율적인 개발 환경으로 만들어주는 프론트엔드 빌드툴입니다.
esbuild란
GO언어로 만들어진 JavaScript 번들러이며, 타 번들러보다 100배 빠르다는 큰 이점이 있습니다.
HMR(Hot Module Replacement)란
개발 중인 웹 애플리케이션의 소스 코드가 수정되었을 때, 브라우저를 새로고침하지 않고도 변경 사항을 즉시 반영하는 기능입니다.
개발서버 구동
Native ESM을 이용해 소스 코드를 제공합니다. 이것은 본질적으로 브라우저가 번들러의 작업의 일부를 차지할 수 있도록 합니다. vite는 브라우저가 요청하는 대로 소스 코드를 변환하고 제공하기만 하면 됩니다.
- 모듈 단위로 파일을 서빙하며, 각 모듈은 개별적으로 캐싱됩니다.
- Dependencies와 Source code로 나누어 번들링 작업 진행
- Dependencies: 개발 시 그 내용이 바뀌지 않을 일반적인 JavaScript 소스 코드입니다.
- Source code: 컴파일링이 필요하고, 수정 또한 매우 잦은 Non-plain JavaScript 소스 코드
Source code 업데이트
- 모듈 감지
- 변경된 모듈 번들링
- 모듈 교체
Vite는 esbuild를 활용해 개발 서버에서 빠른 개발과 실시간 반영을 지원하는 강력한 도구로 사용이 많아졌습니다.
