Vue) Vite?, 왜 사용할까?

Vite란?

• Vue3버전으로 개발을 함에 있어 별다른 번들 생성 없이 ES 모듈을 바로 웹 브라우저에 렌더링 할 수 있도록 만든 개발 툴입니다.

왜 Vite 를 사용하나요?

Vite 의 등장배경 👓

현재 Webpack, Rollup, Parcel 과 같은 도구들 덕분에 프론트엔드 개발자들의 개발 경험이 크게 향상 되었습니다.

그러나 점점 높은 수준의 앱을 개발하기 시작하면서 처리하는 JavaScript의 양도 기하급수적으로 증가했습니다. 대규모 프로젝트에서 수 천 개의 모듈을 담게 되면서 JavaScript 기반 도구에 대한 성능 병목 현상이 일어나기 시작했습니다.

개발 서버를 시작하는데 많은 시간이 소요되며, HMR을 사용하더라도 수정이 반영되는데에 몇 초의 시간이 걸릴 수 있습니다. 이러한 사항들은 개발자에게 큰 불행일 겁니다.
Vite는 이러한 문제들을 해결하기 위해 등장하게 되었습니다.

어떤 특징이 있나요?

• ES build를 사용하여 종속성을 미리 묶습니다. Es build는 Go 로 작성되었으며, JavaScript 기반의 번들러보다 10~100 배 더 빠른 속도로 종속성을 사전 번들링합니다.
• 번개⚡ 같은 HMR ( Hot Module Replacement ) 을 제공합니다.
• 번들을 생성하는 과정이 필요가 없어 서버의 시작속도가 매우 빠르며, 개발자 역시 번들 없이 모듈화된 컴포넌트의 수정사항을 브라우저로 확인할 수 있습니다.
• 현재 수 많은 컨트리뷰터들과의 개발이 진행되고 있고, 베타 상태로 사용할 수 있습니다.

Vue3 와의 호환성

• Vite는 Vue3 를 주요 프레임워크로 지정하고 개발되었기 때문에, Vue3 프로젝트와의 완벽한 호환성을 보여줍니다.
• ES6 를 따르는 Vue3 의 모듈이 별도의 컴파일 과정 없이 브라우저에 렌더링 될 수 있게 해주는 기능은 Vue3 를 이용한 개발을 편리하게 도와줍니다.

Vite Vue3 프로젝트 생성하기 (NPM)

• Vite를 사용하기에 앞서 version 12.0.0 이상의 Node.js 가 필요합니다.
  ( 설치 확인 )

  $ node -v
  $ npm -v

프로젝트 생성

• 아래 3개의 명령어 중 하나를 선택해 생성할 수 있습니다.

  $ npm init @vitejs/app hello-world
  # npm 6.x
  $ npm init vite@latest hello-world --template vue
  # npm 7+
  $ npm init vite@latest hello-world -- --template vue

  이후의 과정에서 Vue를 선택하고 타입스크립트를 적용할 것인가에 대해 선택할 수 있습니다.

실행

• 생성된 프로젝트 폴더에서

  $ npm install
  $ npm run dev

  를 통해 프로젝트를 실행시켜 볼 수 있습니다.

---

용어 설명

1. HMR ??

Hot Module Replacement 의 줄임말로 브라우저를 새로고침하지 않아도 웹팩으로 빌드한 결과물이 웹 애플리케이션에 실시간으로 반영될수 있게 도와주는 설정입니다.

---

참고자료 : Vitejs 공식문서