React와 Vite 함께 사용하기

Vite란?

vite는 webpack, rollup 등과 같이 모듈 번들링을 수행할때 사용되는 번들러이다. 빠르고 간결한 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이다.

네이티브 자바스크립트 모듈인 ES Module을 기반으로 한 데브서버이다.

ES Module?

웹팩과 같은 모듈 번들러가 나왔던 이유는 자바스크립트의 모듈화와 관계가 있다. ES Module이 등장하기 전까지는 자바스크립트 언어 레벨에서 모듈화 방식은 없었다.

그래서 require.js등과 같은 모듈 로더 등을 사용하지 않으면 모듈화가 불가능했다. require.js같은 라이브러리를 사용하다 추후에 자바스크립트 언어에 모듈화 문법(import, export)이 들어오게 되었다.

이러한 모듈화 문법을 이용하여 여러 개의 파일을 하나로 합쳐주거나 의미 있는 단어로 묶어주는 것을 번들링이라고 하고 프론트엔드 생태계에서 모듈 번들러로 대부분 웹팩을 사용하고 있다.
웹팩은 기본 cra에도 도입된 번들러이다. 하지만 속도 측면에서 문제점이 있다. 자바스크립트 파일을 하나로 만들어주기 위해 코드 수정이 이루어질때마다 새롭게 빌드를 하게 되고, 프로젝트의 규모가 커질수록 파일이 많아지게 되니 시간이 오래걸리면 대기시간 또한 길어지게 된다.

Vite의 장점?

빠른 속도

• 처음 사용해봤을때 가장 크게 체감되는부분은 속도가 빠르다는 점이다. Vite의 공식문서에 의하면 개발 서버 시작 시 모든 모듈을 번들링하지 않는다.

웹팩의 경우, 처음 로컬 서버를 시작할때 관련된 모든 모듈을 번들링해서 메모리에 할당하는 시간이 필요하기 때문에 어느정도의 시간이 소요된다.

반면 Vite는 번들링을 하지 않고 바로 서버를 시작하기 때문에 서버 실행 명령어와 동시에 서버가 바로 구동된다.

즉각적인 모듈 업데이터

• 역시 Vite의 공식문서에 의하면 HMR(Hot Module Replacement)를 지원하여, 변경된 모듈만을 빠르게 교체할 수 있다.
• 개발 시, 에디터에서 프론트엔드 코드를 수정해도 페이지 전체를 리로드하지 않고도 변경된 사항을 바로바로 확인할 수 있다.
  

ES 모듈 기반

• Vite는 기본적으로 ES 모듈을 사용하는데, 브라우저가 자체적으로 모듈을 이해하고 불필요한 변환 과정을 줄일 수 있음을 의미한다.

타입스크립트 지원

• 별도 설정이나 플러그인 없이도 타입스크립트를 사용할 수 있다.

최적화된 빌드과정

• Vite는 빌드 과정에서 Rollup을 사용하는데, 최적화된 번들링과 코드 스플리팅을 가능하게 하여 빠른 프로덕트 배포를 지원한다.