Vite

Vite

1. Vite 선택 이유

Vite의 사전 번들링

• 여러 디펜던시를 가진 모듈을 디펜던시 수만큼 Http 요청을 보내는 것이 아닌 한번의 요청
• HTTP 헤더를 이용한 캐싱 처리(브라우저 캐시)
  • max-age=31536000,immutable 헤더를 이용하여 캐시가 존재하면 페이지를 다시 불러올 때 퍼포먼스가 향상된다.
• esbuild라는 go언어로 작성된 라이브러리를 사용하여 빠른 성능

소스코드 동적 import

• 조건부 동적 import

해당 화면에 필요한 코드만 Vite 서버에 요청하면 가져온다.

tsc보다 빠른 ts -> js변환

• 공식문서
• tsc보다 10배정도 빠르다고 한다.

2. vite 환경 변수

• 공식문서 바로가기
• vite에서 접근 가능한 환경변수는 .env 에서 VITE 접두사를 가진다.
  • 예시: VITE_SOME_KEY=123

3. Vite SCSS 설정 적용

• sass, scss 설정 공식문서

4. Vite Cypress 환경 변수 공유 전처리

• cypress-vite 공식문서