Vite 첫 사용 후기

Vite란??

Vite는 프론트엔드 프레인워크로, ES 모듈을 기반으로한 개발서버와 빌드 도구를 제공한다.

경량화된 개발 도구로, CRA 같이 React 프로젝트를 생성하고 구성하는데 사용된다.

(기존 webpack, rollup, parcel 과 같은 bundler 이다)

기존의 Webpack

Webpack은 모든 모듈을 번들링하여 하나의 파일로 만들고, 이 파일을 로딩할때까지 브라우저에서 지연시간이 발생한다.

반면 vite는 es 모듈 시스템을 통하여 필요모듈만 빌드하고, 빌드된 모듈은 브라우저에 바로 로딩된다.

Why Use Vite??

CRA대신 Vite를 쓰는 이유는 다음과 같다.

1. 빠른 빌드 시간: Vite는 빠른 빌드 시간을 제공합니다. 이는 Vite가 빠르게 재구성되는 ESM(ES Modules)을 사용하기 때문입니다.
2. 쉬운 개발 환경 설정: Vite는 설정이 필요하지 않으며, 개발자가 프로젝트를 시작할 때 바로 사용할 수 있습니다.
3. 더 적은 종속성: Vite는 Create React App에 비해 훨씬 적은 종속성을 가지고 있으며, 이는 프로젝트에 대한 더 적은 부담을 줍니다.
4. 플러그인 시스템: Vite는 다양한 플러그인을 사용하여 개발 경험을 향상시키고, 개발자가 원하는 대로 확장할 수 있도록 합니다.
5. 라이브 리로드: Vite는 라이브 리로드를 지원하며, 개발자가 파일을 수정할 때마다 변경 사항이 즉시 반영됩니다.

Then How?

ES build를 사용하여 수천개의 모듈을 묶는데, ES build는 Go로 작성되어  JS 기반의 번들러보다 훨씬 빠른속도로 종속성을 사전 번들링한다.

(실제로 써보니 거의 2 3초만에 빌드된것 같다)

모든 파일을 다 빌드하지 않고, 변경된 부분만 빌드해서 HMR(Hot Module Replacement)을 제공해준다.

 

결론

답답했던 CRA는 이제 안녕...! 앞으로는 vite+ react를 많이 애용할것같다!!!