frontendvite

Vite 사용해보기

javascript, rust, swr, vite
Views: 396

Vite란 무엇인가?

Vite는 번들러 기반의 도구들의 성능 문제를 해결하고자 개발되었습니다. 전통적인 번들러들이 프로젝트의 모든 파일을 빌드하는 데 필요한 시간 때문에 개발자의 생산성을 저하시키는 문제를 가지고 있었는데, Vite는 몇 가지 핵심 기능을 통해 이를 개선했습니다.

Vite의 사용해야하는 이유

공식홈페이지
공식 홈페이지에 자세하게 나와있습니다.
요약을 하자면

  • Native ESM 지원: Vite는 브라우저가 지원하는 ES Modules을 활용하여, 필요할 때 필요한 모듈만을 불러와 처리합니다. 이는 불필요한 모든 모듈의 로드와 번들링을 피하며, 개발 서버의 응답 시간을 개선합니다.
  • 사전 번들링: Vite는 변경이 거의 없는 외부 라이브러리나 종속성들을 사전에 번들링하여 로딩 시간을 단축시킵니다. 이 과정에서 Go 언어로 작성된 Esbuild를 사용하여, 기존 번들러들보다 훨씬 빠른 속도를 제공합니다.
  • HMR(Hot Module Replacement) 지원: Vite는 HMR을 통해 수정된 모듈만을 빠르게 교체하고 새로고침 없이 변경 사항을 반영할 수 있습니다. 이는 개발 시간을 단축하고 피드백 루프를 빠르게 만듭니다.
  • 효율적인 캐싱과 로딩: Vite는 HTTP 헤더를 활용해 페이지 로딩 속도를 높이며, 필요한 코드만을 로드하도록 관리합니다.

추가설명

  • Esbuild: Go 언어로 작성됨 / 코드 파싱, 출력과 소스맵 생성을 모두 병렬로 처리함 / 불필요한 데이터 변환과 할당 없음
  • ES Modules: ES6에 도입된 모듈 시스템 / import, export를 사용해 분리된 자바스크립트 파일끼리 서로 접근할 수 있음

Vite 사용해보기

프로젝트 생성

1
npm create vite@latest

생성

이후에는 프롬프트 창에 출력된 메시지를 선택해서 enter를 누르면 됩니다.
이름 및 각자 플러그인을 선택해주는 것입니다. FE프레임워크 및 js, ts인 것을 알겠는데, SWR는 무엇일까요?

SWR은 무엇인가?

plugin 설명 사이트

개발 중에는 Babel 대신 SWC를 사용합니다.
빌드 중 플러그인을 사용하게 된다면 SWC + esbuild를 사용하고,
그렇지 않다면 esbuild만을 사용합니다.
비표준 React 확장이 필요하지 않은 대규모 프로젝트의 경우, 콜드 스타트와 Hot Module Replacement(HMR)이 훨씬 빠르게 작동할 수 있습니다.

실행

실행은 정말로 간단합니다.

1
npm run dev

실행

빌드

빌드도 마찬가지로 간단하게 커맨드를 실행 시켜주면 됩니다.

1
npm run build

실행

awesome-vite

awesome-vite는 다양한 예시와 플러그인 등을 모아놓은 사이트입니다. 예시 프로젝트들을 참고해서 프로젝트를 손쉽게 시작할 수 있습니다.

performance

공식 홈페이지의 퍼포먼스부분은 코드를 작성할 때 성능 향상에 도움이 되는 부분입니다.

간단한 예시를 보자면 식별 작업 줄이기
import 할때 import './Component' 이렇게 하기보다 import './Component.tsx'처럼 확장자까지 해주는 것이 좋다고 합니다.

  1. ./Component가 존재하는지 확인, 없음
  2. ./Component.mjs가 존재하는지 확인, 없음
  3. ./Component.js가 존재하는지 확인, 없음
  4. ./Component.mts가 존재하는지 확인, 없음
  5. ./Component.ts가 존재하는지 확인, 없음
  6. ./Component.jsx가 존재하는지 확인, 있음!

이같이 임포트 경로를 식별하기 위해 총 6번의 파일 시스템 작업이 필요합니다. 즉, 암시적인 임포트가 많아질수록 경로를 식별하는 데 더 많은 시간이 필요하게 됩니다.

Share