Vite! 정말 빠른 번들러 Vite 적용기

인사

안녕하세요~👋 고영이에요.
오늘은 정말 정말 빠른 번들러인 Vite(비트)를 소개하려고 해요.

번들러

SPA 등의 라이브러리나 프레임워크를 쓰다보면 제품 성능과 파일 관리를 위해 웹 번들러를 사용하게 되는데요. 가장 보편적으로 webpack을 많이 사용하지만 webpack의 단점인 속도가 느리고 설정이 어렵다는 문제로 parcel, rollup 등의 번들러를 사용하기도 해요. 그러다가 혜성처럼 나타난 Vite가 가파르게 점유율을 차지하고 있는 상황이에요.

Vite가 뭐죠?

Vite는 프런트엔드 개발 경험을 크게 향상시키는 새로운 유형의 프런트엔드 빌드 도구에요. Esbuild를 사용하여 기존 빌더 대비 10~100배의 아주 빠른 속도를 내며, 간단한 설정만으로 손쉽게 동작해요.

• Vite를 사용해야하는 이유(공식문서): https://vitejs-kr.github.io/guide/why.html#the-problems

• Vite가 빠른 이유

  • Dependencies code(.js): Esbuild를 사용하여 사전 번들링을 해요. Go 언어로 작성된 Esbuild를 사용하기에 번들링 작업이 10~100배 빠른 속도를 낼 수 있어요.
    • Esbuild가 빠른 이유: https://esbuild.github.io/faq/#why-is-esbuild-fast
  • Source code(.jsx): Native ESM 방식을 사용해요. 기존의 콜드 스타트 방식은 모든 소스코드를 번들링 해야만 실제 페이지를 제공할 수 있었어요. 하지만 Vite는 브라우저에서 현재 페이지에서 사용될 모듈만 빌드하므로 아주 빠른 속도를 낼 수 있어요.
  • HTTP를 이용한 캐싱을 활용해요. Dependencies는 Cache-Control: max-age=31536000,immutable, Source code는 304 Not Modified로 요청을 최소화해요.

• 배포시의 번들링

  • 개발 서버에서는 Esbuild를 사용하지만, 서버에 배포할때는 Rollup을 사용해요. 이는 아직 Esbuild가 코드분할, CSS 처리에 미흡하기 때문이며, 추후에 Esbuild가 안정화된다면 다시 변경될 예정이라고 해요.

Vite 시작하기!

• 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 프로젝트 구성을 시작할 수 있어요.
  • vanilla, react, react-typescript, vue, svelte 등의 다양한 프로젝트를 지원해요.

• 개발 서버 실행하기

  • 위에서 만든 프로젝트 경로로 이동해요. 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 설정하기

• 기본적인 설정은 프로젝트를 만들때 자동으로 설정돼요!
• 추가적인 설정은 https://vitejs-kr.github.io/config/shared-options.html 공식문서를 참고해주세요. 저는 프로젝트에 따라서 base, plugins 정도만 수정해주는 편이에요~!

마무리

간단하게 Vite를 소개해봤는데요. 정말 빠르고 쉬운 번들러이니 꼭 사용해보시길 바래요! 저는 요즘 꽂혀서 Vite만 사용하고 있어요. ㅎㅎ
다만 아쉬운건 Next.js에서는 Rust 기반의 자체적인 번들러를 사용하기에 Vite를 사용할 수가 없어요. 😥 하지만 언젠가는 Vite의 쿨함에 반해 Next도 번들러를 Vite로 바꾸지 않을까요? ㅎㅎ 😎
읽어주셔서 감사해요~! 다들 행복한 코딩하세요~! 🙇‍♀️🙇‍♀️🙇‍♀️