[ React ] 리액트 설치 'vite' - 빠른 속도 개선

vite

create react app 을 사용할때 나오는 문제점을 해결하려고 사용.

vite의 가장 큰 장점은 빌드 속도나 새로운 코드를 적용했을때 반영 속도 같은 피드백 속도의 빠른 성능을 가지고 있습니다.

기존 브라우저에서 ES모듈을 사용할 수 있기 전에는 개발자에 모듈화된 방식으로 javascript를 작성하는 기본 메커니즘이 없었습니다. 시간이 지남에 따라 webpack,Rollup, Parcel과 같은 도구로 번들링을 해결했습니다. 그러나 더 큰 애플리케이션을 구축하기 시작하면서 처리하는 javascript의 양이 기하수적으로 증가 하여 성능 병목현상이 발생하기 시작하였습니다. 예를 들어 서버 가동에 오랜시간이 걸리거나 브라우제에 반영되는 것이 몇초가 걸리는 문제들인데 vite는 이러한 문제를 해결하는 것이 목표입니다.

느린 서버 시작 속도

번들러 기반의 서버 스타트는 모든 모듈을 크롤링하고 빌드 합니다.
vite는 종속성과 소스코드 두가지 범주로 나누어 개발 서버 시작 시간을 개선합니다.

종속성은 대부분 개발중 자주 변경되지 않는 일반 javascript 인데, 크게 ESM 또는 CommonJS로 제공할 수 있습니다.
vite는 esbuild를 사용하여 종속성을 사전 번들로 제공합니다.
esbuild는 Go로 작성되어 있으며 javascript 기반 번들러보다 10배에서 100배 이상 빠르게 번들링됩니다.

vite는 기본 ESM을 통해 소스코드를 제공하는데 이것은 브라우저가 번들러 작업의 일부를 인계받아 작업할 수 있습니다.
때문에 vite는 브라우저가 요청할 때 요청에 따라 소스코드를 변환하고 제공하기만 하면되어 더 빠른 속도를 낼 수 있습니다.

느린 서버 업데이트 속도

번들러 기반 빌드 설정에서 파일을 편집할 때 전체 번들을 다시 빌드하는것은 비효율적입니다.

일부 번들러에서 개발 서브는 파일이 변경될 때 모듈 그래프의 일부만 무효화하면되지만 전체 번들러들을 다시 구성하고 웹페이지를 다시 로드해야 하도록 메모리에서 번들링을 실행합니다. 때문에 변경된 모듈만 교체하는 HMR(Hot Module Replace)를 사용합니다.

vite에서는 HMR을 ESM에서 사용하여 앱의 크기가 커져도 빠르게 업데이트 가능합니다.
vite에서는 기본적으로 Typescript를 지원하며 esbuild 가 go로 쓰여 있기때문에 훨씬 빠른 속도로 가능합니다.

1. 리엑트 앱 설정

1) 초기 셋팅

npm init vite

프로젝트 이름 , 패키지 이름 , 사용하는 프레임워크 ,언어 선택 후 자동으로 리엑트 앱이 생성됩니다.

npm install
기본 모듈 설치를 위해 명령어를 해주어야 합니다.

2) 필요한 패키지 설치
npm install axios react-router-dom
npm install -D autoprefixer postcss tailwindcss