[Vite] 빛처럼 빠른 빁 ⚡ ( with. Vue 설치 )

목차

1. Vite 이란?
2. Vite 사용하는 이유
3. Vite가 속도 개선하는 방법
4. Vite 설치 및 실행 ( with. Vue.js )

• 참고

---

1. Vite 이란? 

Vite의 공식적인 특징 6가지

출처 : https://vitejs.dev/

1. 빠른 서버 시작 -> 최고✔️
2. 엄청나게 빠른 HMR ( 핫 모듈 리플레이스를 통해 소스 업데이트를 빠르게 반영한다. ) -> 최고✔️
3. 풍부한 기능 → 타입 스크립트, JSX, CSS 지원한다.
4. 빌드 최적화 도구 이다.
5. 다양한 플러그인을 제공한다.
6. 타입스크립트 타입으로 만들어진 API이다.

 
참고 : https://vitejs.dev/ 
 
 

---

2. Vite 사용하는 이유

(어떤 문제를 해결하기 위해 사용하는 것일까?)

• 가장 큰 장점은 빌드 속도 및 새로운 코드 적용했을 때 반영속도이다.
• 브라우저에서 ES 모듈을 사용할 수 있기 전에는 모듈화된 방식으로 JavaScript를 작성하는 방법이 없었다,
  •  html에서 한 땀 한땀씩 가져옴
  •  ES모듈 : import , export로 코드 가져오고 내보내는 것.
• 이로 인해 번들링(webpack, Rollup, Parcel)을 이용했다.
  • 번들링은 소스 모듈을 브라우저에서 실행할 수 있는 파일로 크롤링, 처리 및 연결하는 도구이다.
• 그러나 점점 더 큰 애플리케이션 구축하며 JS의 양도 기하급수적으로 늘었다.
• 이로인해 javaScript 기반 도구에 대한 성능 병목 현상이 발생하기 시작했다.
  • 병목 현상 : 개발 서버 가동 시, 최대 몇분 씩 소요 되며 HMR을 사용하더라도 파일 편집이 반영되는 데 몇 초(많게는 수 십, 초, 분)가 걸리기 시작했다.
• 느린 피드백 루프는 개발자의 생산성에 악 영향을 준다.
• Vite는 생태계의 새로운 발전을 활용하여 이러한 문제(빠른 반영 속도)를 해결하는 것을 목표로 한다.

[ Vite 사용하는 이유 요약 ]

1. 브라우저에서 ES 모듈 사용할 수 있기 전에는 모듈화 된 방식으로 JavaScript 작성하는 메커니즘이 없었다.
2. 그래서 번들링이 필요했고 사용되었다. ( Webpack, Rollup, Parcel) 등의 도구로 번들링 해결
3. 더 큰 앱을 위해 더 많은 자바스크립트 사용 및 엄청나게 많은 모듈들이 사용되었다.
4. 이로 인해 성능 병목 현상, 느린 서버 가동 속도, 느린 HMR로 파일 편집 반영속도도 느려졌다.

그래서 Vite는 속도 개선을 하기 위해 등장했다.
 

---

3. Vite가 속도 개선하는 방법 (2가지)

3-1. 느린 서버 시작 속도

번들러 기반 서버 시작의 경우에는. 엔트리 → route → 모듈 순으로 번들링 후 서버를 시작할 수 있었다.
모듈이 많아짐에 따라 번들링 과정이 더 길어지기 때문에 시간이 오래 걸렸다.
 

[Vite의 방법]

Vite는 먼저 애플리케이션의 모듈을 종속성과 소스 코드 두 가지 범주로 나누어 개발 서버 시작 시간을 개선한다.
 

[종속성]

대부분 개발 중 자주 변경되지 않는 일반 JavaScript 파일이다.
종속성은 다양한 모듈 형식 ( ESM, CommonJS)로 제공되고 있다.
Vite는 esBuild를 사용하여 종속성을 사전 번들로 제공한다.
esbuild는 Go로 작성되어 js기반 번들러보다 10~ 100배 더 빠르게 종속성을 사전 번들링한다.

 

[소스코드]

소스코드에는 변환이 필요한 일반 js가 아닌 경우가 많으며(JSX, CSS , vue/Svelte)매우 자주 편집된다.
또한 모든 소스코드를동시에 로드할 필요가 없다. (경로 기반 코드 분할 )
Vite는 기본 ESM을 통해 소스코드를 제공한다.
본질적으로 브라우저가 번들러 작업의 일부를 인계받게 하는 것이다.
 
Vite는 브라우저가 요청할 때 여창에 따라 소스코드를 변환하고 제공하기만 하면 된다.
조건부동적 가가져오기 뒤에 있는 코드는 현재 화면에서 실제로 사용되는 경우에만 처리된다.
Vite는 ESM(EcmaScript Modules)를 사용하여 소스코드를 제공한다.
ESM을 이용하면, 번들러가 하는 작업의 일부를 브라우저가 하도록 하게 할 수 있다.
 
그리고 브라우저가 소스코드를 요청할 때 (기존에는 번들을 모두 다 한 후에 서버가 시작)
Vite는 실제로 사용할 때만 소스코드를 제공해주기 때문에 Native Esm based dev server가 된다.
서버 시작 후 → 서버 요청에 따라 서버 번들을 한다.

3-2. 느린 서버 업데이트 속도

번들러 기반 빌드 설정에서 파일을 편집할 때, 전체 번들을 다시 빌드 하는 것은 비효율적이다.
업데이트 속도는 앱 크기에 따라 선형적으로 저하된다. ( 앱 크기 커지면, 업데이트 속도 매우 느려짐)
일부 번들러에서 개발 서버는 파일이 변경될 때 모듈 그래프의 일부만 무효화하면 되지만,
전체 번들을 다시 구성하고 웹 페이지를 다시 로드해야 하도록 메모리에서 번들링을 실행한다.
 
번들을 재구성하는데 비용이 많이 들 수 있으며, 페이지를 다시 로드하면 애플리케이션의 state가 손상된다.
이러한 문제를 해결 하기 위해 일부 번들러가 HMR(핫 모듈 교체)를 지원한다.
페이지의 나머지 부분에 영향을 주지 않고 모듈 자체를 HMR할 수 있다.
 
HMR이 개발자 경험(DX)를 크게 향상 시킨다.
하지만 이것도 HMR 업데이트 속도도 응요프로그램의 크기가 증가함에 따라 크게 저하된다.
 
[HMR 이란?]
Hor Module Replace란, 파일을 편집할 때 전체 번들을 다시 빌드하는 것이 아니라,
페이지의 나머지 부분에 영향을 주지 않고 변경된 모듈 자체를 교체해서 빠르게 화면에 반영되게 하는 것이다.
Vite에서 HMR은 기본 ESM을 통해 수행된다.
파일이 편집될 때 Vite는 편집된 모듈과 가장 가까운 HMR 경계 사이의 체인을 정확하게 무효화하면 애플리케이션의 크기에 관계없이 HMR업데이트가 일관되게 빨라진다.
(일반적으로 애플리케이션의 크기가 커지면, HMR의 속도도 느려지는데, Vite는 기본 ESM을 통해 수행하기 때문에 애플리케이션의 크기가 커져도 일관되게 빠르게 수행할 수 있다.)
 
[TypeScript 트랜스파일링 속도]
Vite는 TypeScript 사용을 지원하며 esbuild (go를 이용)를 이용해서 트랜스파일링(transpiling) 하기 때문에 훨씬 빠른 속도로 할 수 있다.
하지만, 타입 체크 기능이 없다.
이미 에디터 내에 다른 것들이 타입 체킹을 하기 때문에 트랜스파일링만 제공한다.
 

---

4. Vite 설치 및 실행 ( with. Vue.js ) 

4-1. npm create vite@latest

최신 버전의 Vite를 설치할 것인지 물어보는 커맨드창 —> y 입력
y를 눌러 설치를 하면, 다음과 같이 프로젝트 이름 설정과 프레임워크 선택을 할 수 있습니다.
 

저는 기본 디폴트 값인 vite-project 와 Vue를 선택했습니다.
 
 

그러면 JS, TS 선택할 수 도 있습니다!

저는 vite 프로젝트를 실행시키기 전에 npm 업데이트부터 해야겠군요!
 

설치 완료!
vite-project 폴더로 이동해서 npm install 후 npm run dev하게 되면,
다음과 같이 vite 로 빌드 한 vue가 실행이 됩니다! (862 ms 로 엄청 빠릅니다!!!!!)
 
vite 로 실행시킨 vue의 첫 화면 입니다.

 

 

(+ 2023-12-12 추가)

vite의 포트번호 변경은 vite.config.js ( or .ts) 파일에서 

 

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
});

 

defineConfig 인자 객체 내 plugins 아래에 server : 포트번호 를 key : value로 추가해주면 됩니다.

 

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 5000,  // 내가 원하는 비어있는 포트
  },
});

 

이렇게 하면 해당 포트로 설정이 완료 됩니다.

---

 
[참고]
패스트캠퍼스 - 프론트엔드 웹 개발의 모든 것 초격차 패키지 Online.
vite 공식 가이드 : https://vitejs.dev/ 
vite 한글 가이드 : https://vitejs-kr.github.io/guide/