React Project | vite 란 ?, Create React App과 Vite 비교

프로젝트 시작 명령

npm i vite
// Vite라는 프론트엔드 빌드 도구를 설치

npm i axios react-router-dom
// HTTP 요청을 위한 Axios와 React 애플리케이션의 라우팅을 처리하기 위한 React Router DOM을 설치

npm i -D autoprefixer postcss tailwindcss
// 스타일링을 위한 Autoprefixer, PostCSS 및 Tailwind CSS를 개발 의존성으로 설치

npm install
// package.json 파일에 나열된 모든 의존성을 설치합니다. 앞서 실행한 명령어로 추가된 새로운 의존성을 포함하여 모든 의존성이 올바르게 설치되었는지 확인
// 또한, 의존성 간의 충돌을 해결하고 node_modules 디렉토리를 업데이트

 

vite 란 ?

사용하는 이유

vite의 가장 큰 장점은 빌드 속도나 새로운 코드를 적용했을때의 반영 속도 같은 feedback 속도의 엄청난 개선입니다

 

번들러 기반 빌드 설정은 전체 애플리케이션을 다 번들링한 다음에 서버를 시작할 수 있음 --> 속도 저하

 

서버 먼저 시작하고 브라우저 요청이 있을 때, 실제로 사용할 때만 제공하는 방식. 속도가 훨씬 빨라짐

 

1. 느린 서버 시작 속도 개선

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

- 종속성

대부분 개발 중에 자주 변경되지 않는 일반 자바스크립트

일부 큰 종속절(ex. 수백개의 모듈이 있는 구성 요소 라이브러리)도 처리하는데 비용이 많이 걸림

vite는 esbuild를 사용해서 종속성을 사전 번들로 제공함

--> 자바스크립트 기반 번들러보다 10-100배 정도 더 빠르게 종속성을 사전 번들링함 !

 

- 소스코드

변환이 필요한 일반 자바스크립트가 아닌 경우가 많으며, (ex. JSX, CSS 또는 Vue/Svelte 구성요소)

매우 자주 편집됨. 모든 소스코드를 동시에 로드할 필요는 없음 (ex. 경로 기반 코드 분할)

 

vite는 기본 ESM을 통해 소스코드를 제공함

이는 본질적으로 브라우저가 번들러 작업의 일부를 인계받게 하는 것임

vite는 브라우저가 요청할 때 요청에 따라 소스코드를 변환하고 제공하기만 하면 됨.

조건부 동적 가져오기 뒤에 있는 코드는 현재 화면에서 실제로 사용되는 경우에만 처리됨

 

 

2. 느린 서버 업데이트 속도 개선

HMR(hot module replacement) 란 ?

개발 중에 코드가 변경되면 페이지 전체를 새로고침하지 않고, 변경된 부분만 업데이트하여 브라우저에 반영하는 기술

 

Vite에서 HMR 동작 방식

1. 파일 편집 감지:
• 개발자가 소스 파일을 편집하면 Vite는 이를 감지합니다.

2. 모듈 무효화:
• Vite는 편집된 모듈과 관련된 가장 가까운 HMR 경계(보통 그 모듈 자체)를 찾아내어 그 모듈을 무효화합니다.
• 이 과정에서 Vite는 모듈 간의 의존성을 분석하여 어떤 모듈이 변경되었는지, 그 변경이 다른 모듈에 어떤 영향을 미치는지 파악합니다.

3. 빠른 업데이트:
• 무효화된 모듈만 다시 로드하여 브라우저에 반영합니다.
• 페이지 전체를 새로고침하는 대신, 변경된 부분만 즉시 업데이트되므로 애플리케이션 크기에 상관없이 HMR 업데이트가 일관되게 빠릅니다.

예시
1) Button.js 파일에서 버튼의 스타일을 변경합니다.

// Button.js
export default function Button() {
  return <button style={{ color: 'red' }}>Click me</button>;
}​

2) Vite는 Button.js 파일의 변경 사항을 감지하고, 해당 모듈을 무효화합니다.

3) Button.js 모듈이 무효화되면 브라우저는 이 모듈을 다시 로드하고, 변경된 스타일을 즉시 반영합니다.

• 브라우저에서 버튼의 색상이 빨간색으로 변경됩니다.

 

--> 무효화를 통해 Vite는 개발자가 변경한 코드가 브라우저에 즉시 반영되도록 하며, 이는 전체 페이지를 새로고침하지 않고도 빠르게 변경 사항을 확인할 수 있게 합니다. 이를 통해 개발 생산성을 크게 향상시킬 수 있습니다.

 

 

또한 vite는 HTTP 헤더를 활용하여 전체 페이지 로드 속도를 높임(브라우저가 더 많은 작업을 수행하도록 함)

 

HTTP 헤더란?
HTTP 헤더는 서버와 클라이언트(브라우저) 간의 요청과 응답에 대한 추가 정보를 제공하는 데이터입니다. 이를 통해 브라우저가 리소스를 어떻게 처리해야 하는지 지시할 수 있습니다.

Vite가 사용하는 주요 HTTP 헤더
1. Cache-Control:
• 이 헤더는 브라우저에 리소스를 어떻게 캐싱할지 지시합니다.
• Vite는 정적 자산(이미지, CSS, JavaScript 파일 등)에 대해 적절한 캐싱 정책을 설정하여, 브라우저가 자주 변경되지 않는 리소스를 다시 다운로드하지 않도록 합니다.

• 예시:

Cache-Control: max-age=31536000, immutable

// 리소스가 1년 동안 캐싱될 수 있으며, 변경되지 않음을 나타냅니다.​

 

2. ETag:

• ETag(엔터티 태그)는 특정 리소스의 고유한 식별자입니다.

• 서버는 리소스가 변경되었는지 여부를 확인하기 위해 ETag를 사용합니다.

• 브라우저가 서버에 요청을 보낼 때, 리소스가 변경되지 않았다면, 서버는 304 Not Modified 상태 코드를 반환하고, 브라우저는 캐시에 저장된 리소스를 사용합니다.

• 예시:

ETag: "12345"

 

3. Content-Encoding:

• 이 헤더는 서버가 리소스를 압축하여 전송할 수 있도록 합니다.

• Vite는 Gzip 또는 Brotli와 같은 압축 알고리즘을 사용하여 파일 크기를 줄이고, 전송 속도를 높입니다.

• 예시:

Content-Encoding: gzip

 

Vite의 최적화 전략

 

1. 정적 파일 캐싱:

• Vite는 정적 파일에 대해 긴 캐싱 기간을 설정합니다. 이를 통해 브라우저는 동일한 리소스를 반복해서 다운로드하지 않고, 캐시에서 빠르게 로드할 수 있습니다.

2. 효율적인 변경 감지:

• ETag와 같은 메커니즘을 사용하여 파일이 변경되지 않았을 때 브라우저가 캐시를 사용하도록 합니다. 이는 불필요한 네트워크 요청을 줄여줍니다.

3. 압축 전송:

• Vite는 파일을 압축하여 전송합니다. 이는 네트워크 대역폭을 절약하고, 파일 다운로드 시간을 단축시킵니다.

 

3. Typescript Transpilling 속도

vite를 이용하면 기본적으로 Typescript 사용을 지원하며 esbuild을 이용해서 transpilling 하기 때문에 훨씬 속도가 빠름

하지만 Type Checking 기능은 없음 (이미 에디터 내에서 다른 것들이 하기 때문)

Vite에서 TypeScript 사용

1. TypeScript 지원:
• Vite는 TypeScript 파일을 직접 처리할 수 있습니다. 별도의 설정 없이도 .ts 파일을 사용할 수 있습니다.

2. esbuild 사용:
• Vite는 esbuild라는 초고속 JavaScript 번들러를 사용하여 TypeScript 코드를 JavaScript로 변환(transpile)합니다.
• esbuild는 매우 빠르기 때문에, TypeScript 코드를 변환하는 속도가 다른 도구보다 훨씬 빠릅니다.

타입 체크(Type Checking)

• 타입 체크란?:
• TypeScript의 주요 기능 중 하나로, 코드에서 변수와 함수의 타입을 검사하여 타입 오류를 미리 발견할 수 있게 합니다.
• 예를 들어, 숫자 타입 변수에 문자열을 할당하려고 하면 타입 오류가 발생합니다.

• Vite에서 타입 체크:
• Vite는 TypeScript 파일을 변환할 때 타입 체크를 하지 않습니다. 이는 변환 속도를 높이기 위한 선택입니다.
• 대신, 타입 체크는 대부분의 개발자들이 사용하는 코드 편집기(예: VSCode)나 별도의 타입 체크 도구를 통해 수행됩니다.

 

Create React App과 Vite 비교