[Vue] Vue는 뭐고 Vite는 뭐야

Vite 란?

Vite(바이트)는 Vue의 빌드 도구이다.
Vite 는 프랑스어로 빠르다 라는 뜻인 vitesse 에서 영감을 받아 명명했다고 한다.
Vite는 프론트엔드 개발에 사용되는 모듈번들러 이다.

Module Bundler(모듈번들러) 란?

모듈 번들러는 프론트엔드 개발에 사용되는 도구로 여러 개의 모듈화된 자바스크립트 파일 및
다른 종류의 파일들을 하나로 묶어주는 역할을 한다.

// 이전 방식
<script src="/test.js"></script>
// 현재 방식
import {test} from '/test.js'

모듈 번들러 없이 import, export 같은 모듈화 문법을 사용하면 에러가 발생한다.
이러한 모듈화 되어있는 파일들을 하나로 묶어주는 역할을 한다고 보면된다.

Webpack(웹팩) 과의 차이

흔히 프론트엔드 개발에 사용되는 모듈 번들러는 웹팩이다.
Vite와 Webpack 은 같은 모듈 번들러이지만 몇가지 중요한 차이가 있다.

1. 번들링 방식
   – Vite 는 개발 시에는 빠른 개발 서버에서 ES 모듈을 사용하여 필요한 모듈을 미리 빌드하지 않고
   동적으로 로딩한다. 프로덕션 빌드 시에는 더욱 최적화된 빌드를 수행한다.
   – Webpack 은 모든 모듈을 번들링하여 하나의 큰 파일로 생성한다.
   이 파일은 브라우저에서 실행될 때까지 레이지로딩 및 코드 분할과 같은 기능을 사용할 수 있다.
   
2. 성능 및 속도
   – Vite 는 초기 불러오기 속도가 매우 빠르다.
   개발 서버에서는 빌드된 파일을 메모리에 저장하고 파일에 직접 액세스하여 빠르게 제공해준다.
   – Webpack 은 큰 규모의 프로젝트에서는 초기 불러오기 속도가 Vite보다 느리다.
   
3. 환경설정
   – Vite 는 설정이 필요한 경우에도 기본적으로 설정 파일이 작고 간단하다.
   별도의 설정 없이도 대부분의 경우에 잘 동작한다.
   – Webpack 은 더 복잡한 설정이 필요하며, 다양한 로더 및 플러그인을 조합하여 사용해야 한다.

결론

Vite는 주로 Vue 프로젝트에서 사용한다.
빠른 개발 서버와 간편한 설정으로 인해 빠른 개발을 할수가 있다.
반면 Webpack 은 더 많은 설정과 확장성을 제공하며 다양한 프레임워크와 라이브러리를 사용할 수 있다.