안녕하세요~👋 고영이에요.
오늘은 정말 정말 빠른 번들러인 Vite(비트)를 소개하려고 해요.
SPA 등의 라이브러리나 프레임워크를 쓰다보면 제품 성능과 파일 관리를 위해 웹 번들러를 사용하게 되는데요. 가장 보편적으로 webpack을 많이 사용하지만 webpack의 단점인 속도가 느리고 설정이 어렵다는 문제로 parcel, rollup 등의 번들러를 사용하기도 해요. 그러다가 혜성처럼 나타난 Vite가 가파르게 점유율을 차지하고 있는 상황이에요.
Vite는 프런트엔드 개발 경험을 크게 향상시키는 새로운 유형의 프런트엔드 빌드 도구에요. Esbuild를 사용하여 기존 빌더 대비 10~100배의 아주 빠른 속도를 내며, 간단한 설정만으로 손쉽게 동작해요.
Vite를 사용해야하는 이유(공식문서): https://vitejs-kr.github.io/guide/why.html#the-problems
Vite가 빠른 이유
Cache-Control: max-age=31536000,immutable
, Source code는 304 Not Modified
로 요청을 최소화해요.배포시의 번들링
Vite 시작하기(공식문서): https://vitejs-kr.github.io/guide/#scaffolding-your-first-vite-project
Vite로 프로젝트 만들기
npm create vite@latest
or yarn create vite
or pnpm create vite
명령으로 vite 프로젝트 구성을 시작할 수 있어요. 개발 서버 실행하기
cd vite-project
npm run dev
or yarn dev
or pnpm dev
명령을 실행하면 순식간에 서버가 준비돼요. ⚡⚡⚡ http://127.0.0.1:5173
주소를 입력하면 페이지를 볼 수 있어요!빌드하기
npm run build
or yarn build
or pnpm build
명령을 사용해요. /dist
폴더가 생길거에요. npm run preview
or yarn preview
or pnpm preview
명령을 입력하시고 커맨드에 나타난 주소로 브라우저를 실행해보세요~!https://<USERNAME>.github.io/<REPO>/
와 같은 형태로 배포하고자 한다면, base 설정 값을 /<REPO>/
로 지정해주세요.간단하게 Vite를 소개해봤는데요. 정말 빠르고 쉬운 번들러이니 꼭 사용해보시길 바래요! 저는 요즘 꽂혀서 Vite만 사용하고 있어요. ㅎㅎ
다만 아쉬운건 Next.js에서는 Rust 기반의 자체적인 번들러를 사용하기에 Vite를 사용할 수가 없어요. 😥 하지만 언젠가는 Vite의 쿨함에 반해 Next도 번들러를 Vite로 바꾸지 않을까요? ㅎㅎ 😎
읽어주셔서 감사해요~! 다들 행복한 코딩하세요~! 🙇♀️🙇♀️🙇♀️