[Vite] Vite 알아보기

• 근래에 Vite에 대해 이런저런 추천을 받기도 했고, 실제로 Vite로 된 프로젝트를 경험해본고로 상당한 인상을 받았기에... Vite에 대해 알아보고자 한다.

---

Vite란?

※ 발음은 '비트'다! 공식 사이트에서 친절하게 발음 예시도 제공해준다.

 

빠른 개발 환경을 위한 프론트엔드 툴

•   기존에 오랜 시간 사용되던 Webpack 등의 번들러의 문제점은 무겁고 느리다는 것이다.
  • 특히 프로젝트의 규모가 커질수록 이런 문제가 더더욱 두드러진다.
  • 이는 곧 개발상의 불편함을 야기한다.

번들러 (Bundler): 웹의 이런저런 소스들(JS 코드, CSS 같은 asset들)을 브라우저가 사용할 수 있는 정적인 파일들로 만들어주는 도구.

 

• 위의 문제를 해결하기 위해, 브라우저가 지원하는 ES Modules + 네이티브 언어로 된 도구를 사용하는 것이 바로 Vite다.

 

ESM (ES Modules)란?

• JS에서 모듈을 정의하고 가져오는 방식 중 하나를 의미한다.
• 이러한 방식에는 ESM 말고도 CommonJS(CJS)가 있다.

	CommonJS	ESM
사용 방식	require + module.exports	import + export
사용 환경	Node.js	브라우저 / Node.js
실행 시점	런타임에 동기적으로 로드됨.	정적으로 분석됨. (런타임이 아닌, 파일 로드 전)

 

Vite와 기존 방식과의 차이

• 기존에는 어플리케이션 내 모든 코드를 매번 다시 빌드했어야 했다.
  • 이 예시로 바로 Dependencies가 있다. Dependencies는 개발 중엔 내용이 변하기 않기 때문에, 이를 매번 번들링 하는 데에는 많은 시간을 사용한다.
  • 그러나 Vite는 Esbuild를 사용한 사전 번들링 기능을 제공하고, 변경된 모듈만 빌드하기 때문에 훨씬 더 빠른 속도를 제공한다.
• ESM을 사용하여 모듈을 빠르게 로드함으로써 성능을 최적화할 수 있다.
  • 모든 소스 코드를 한 번에 번들링해서 브라우저에 제공하는 식이 아닌, 브라우저가 필요한 소스 코드 만을 전달하게 된다.

 

+) SWC란?

  Vite에서 제공하는 템플릿 프로젝트로 Vite를 잠시 살펴보던 중, 프로젝트 생성에 옵션을 제공하는 것을 발견했다.

yarn create vite my-vue-app // Vite 템플릿 프로젝트를 생성한다.

 

  그것은 SWC를 사용할 것인지, 아닌지를 결정하라는 것이었는데, SWC가 무엇인지 잘 몰랐기에 빠르게 검색해보았다.

 

  공식 홈페이지의 설명을 간단하게 적어보면 아래와 같다.

• SWC(Sppedy Web Compiler)란 Rust 에 기반한 개발 툴로, 컴파일러와 번들러의 역할을 수행한다.
  • JS/TS로 된 파일을 받아 주요 브라우저들에서 지원하는 형태의 유효한 코드로 변환한다.
• Rust로 작성되었기 때문의 Babel보다 20~70배 빠른 속도를 보인다고 한다(70배는 4개 코어에서라고).

 

  알고보니 Next.js에서도 사용하고 있는 툴이었다. Next.js에서 밝힌 SWC를 사용하는 이유란 아래와 같다.

1. 확장성. 별도로 라이브러리를 fork해오지 않아도 Next.js 내부에서 바로 사용할 수 있다.
2. 성능. SWC를 사용함으로써 전보다 3배 더 빠른 Fast Refresh 및 5배 더 빠르게 빌드하는 것이 가능하다.
3. WebAssembly. Rust가 이를 지원한다고 한다. WebAssembly란 웹에서도 어플리케이션을 네이티브에 가까운 속도로 실행하는 것을 목표로 개발된 포맷으로, C/C++ 등의 언어로 된 코드를 웹에서 실행할 수 있는 형태로 바꾸는 기술이다.
4. 커뮤니티. Rust 커뮤니티와 그 생태계는 빠른 속도로 발전하고 있다.

 

  대충 살펴보니, 빠른 속도와 앞으로의 잠재성에 기반하여 SWC를 차용하고 있는 것으로 보였다. 이걸 보니 궁금해지지 않을 수가 없어서(...) SWC를 사용하는 걸로 선택했다.

 

  참고로 SWC를 사용하기 위해서는 Node.js 버전 18.18.0 버전 이상을 요구한다.

 

---

• 실제로 Vite를 사용한 프로젝트를 살펴볼 기회가 있었는데, 초기 실행 속도부터가 엄청난 센세이션이었다...!
• 기회가 된다면 Webpack으로 된 프로젝트를 Vite로 전환해보고 싶다...