Vite 소개
꿈일기 스터디 54회차 커피챗 자료입니다.
⛳ 목표 설정
- Vite 소개
- Vite 주요 특징
🔖 주제
내용내용내용내용내용내용내용내용내용내용
📓 설명
🍎 Vite 소개
Vite는 프론트엔드 빌드 도구로, 빠른 개발 환경과 효율적인 빌드 프로세스를 제공하는 것을 목표로 합니다.
Vite가 지향하는 것은 빠른 개발 서버와 프로덕션 빌드 최적화 기능입니다.
이를 위해 빠른 핫 모듈 리플레이스먼트(HMR), ES 모듈 기반의 개발 방식, 간단한 설정 등의 장점을 제공합니다.
🦅 Vite 주요 특징
ESM 기반 개발 방식
Vite의 가장 큰 특징 중 하나는 ES 모듈(ESM, ECMAScript Modules) 기반의 개발 방식입니다.
기존의 번들러들은 모든 모듈을 하나의 파일로 번들링하여 이를 브라우저에 전달하지만, Vite는 브라우저의 네이티브 ES 모듈 지원을 활용하여 개발 중에는 번들링을 생략합니다.
즉, 필요한 모듈만 즉시 로드하여 초기 로딩 속도가 매우 빠릅니다.
이 방식은 다음과 같은 장점이 있습니다:
- 빠른 초기 로딩: 모든 파일을 번들링하지 않고 필요한 파일만 로드하므로 초기 로딩 속도가 빠릅니다.
- 개발 중 변경사항 즉시 반영: 모듈 단위로 변경사항을 반영하므로, 코드 수정 후 변경된 부분만 빠르게 업데이트할 수 있습니다.
- 간단한 설정: 복잡한 설정 없이도 빠르게 개발 환경을 구성할 수 있습니다.
HMR 지원
HMR은 Vite의 또 다른 중요한 기능으로, 핫 모듈 리플레이스먼트(Hot Module Replacement)는 모듈을 변경할 때 전체 페이지를 새로 고치지 않고 변경된 모듈만 동적으로 교체하는 기술입니다.
이는 개발자가 코드 수정 후 즉시 결과를 확인할 수 있도록 하여 개발 속도를 크게 향상시킵니다.
HMR의 작동 방식은 다음과 같습니다:
- 변경 감지: 개발 서버가 파일 시스템을 감시하여 소스 코드에 변경이 발생하면 이를 감지합니다.
- 변경된 모듈 컴파일: 변경된 모듈만을 다시 컴파일합니다.
- 변경된 모듈 전송: 변경된 모듈을 브라우저로 전송합니다.
- 모듈 교체: 브라우저에서는 변경된 모듈을 기존 애플리케이션에 동적으로 교체합니다. 이때, 애플리케이션의 상태를 유지할 수 있습니다.
이로 인해, 빠른 피드백과 개발 생산성 향상이 가능해집니다. 특히, 대규모 애플리케이션에서도 높은 성능을 유지하면서 개발할 수 있습니다.
🏃Vite 시작하기
vanilla 외에도 vanilla-ts, react, react-ts, vue 등등 다양한 프레임워크를 지원합니다!
📦 참고 자료
Bonjour, Vite! (Vite 실무 적용기)
헥토데이터의 서비스개발팀(FE 전담 팀)이 실무에서 기존에 사용하던 Webpack 대신 Vite를 도입한 적용기를 자세하게 알려드립니다.
blog.hectodata.co.kr