빠르고 빠른 번들러, Vite!
이번 프로젝트를 하며 처음으로 접해본 vite,
그는 한 마리의 나비처럼 날아와 나에게 다가왔다,,,
이게 무슨 소리야,,?
그동안 create-react-app 으로 슈슉, 슉 하고 프로젝트를 생성하던 나에게 번들러는 선택의 대상이 아니었다.
하지만 이젠 다르지!
웹팩만을 쓰다가 이번 프로젝트에서 vite를 사용하고 나니 신기했다, 놀랍구.
놀랍기도 하다가 점점 적응했다가도 다른 프로젝트들 개발 서버를 띄우는 몇 초의 시간을 보며 다시금 vite 의 빌드 속도를 체감하게 되었다.
당신이 개발 서버 띄우는 그 몇 초의 시간의 낭만을 알아?
모른다. 난 npm run dev 하면 바로 서버 띄워지는 지금이 좋다.
Vite란ㅡ?
Vite란, 프랑스어로 '빠르다'를 의미하는 단어이다!. 프랑스어이기에 바이트가 아닌 비트로 읽는다.
veet!
vite는 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이며, 두 가지 컨셉을 중심으로 하고 있습니다.
- 개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공합니다!
- 번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있습니다. 이는 높은 수준으로 최적화된 정적 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정(Pre-configured)를 제공합니다.
vite에 대한 소개는 이렇게 말할 수 있다!!
ES Module의 이점과 Rollup의 이점을 섞어 서로를 보완한 번들러라는 뜻이다!!
여기서 번들러란?
- 번들러는 간단히 말해 여러 파일들을 하나의 파일로 묶어주는 도구이다!
번들러가 왜 필요하나요!
브라우저는 ES 모듈을 지원하지 않았다,,!!!
그렇기에 스크립트 파일 간 모듈을 내보낼 수도 받아올 수도 없었다는 역사가 있다.
정말 태초에는 웹 서비스가 돌아가기엔 몇 몇의 스크립트 파일로도 가능했지만, 이젠 너무나도 방대해져버린, 복잡해진 소스코드들을 관리하기가 너무 어려워졌기에 12년도 웹팩의 등장이 있기 전까진 window, jQuery 등의 전역 객체를 사용해 스크립트 파일 간 모듈 공유를 해왔었다...
하지만!
사람들이 브라우저에서 더 많은 활동과 사용자 경험을 바탕으로 한 서비스를 요구하게 되자
더욱 작고 최적화된 리소스를 제공하기 위해,
여러 파일을 하나로 통합하고 압축시키기 위해,
다양한 환경 속에서도 동일하게 돌아갈 수 있게 코드를 변환시키기 위해, 등등
이 많은 요구 사항들을 자동화 시켜줄 도구가 필요했다!
사람은 도구를
아! 그게 바로 번들러구나!
rollup, ESBuild 그리고 비트
vite는 이 둘의 이점을 살린 차세대 번들러이다.
Rollup 은 확장에 의의를 두어 다양한 개발 환경 속에서 같은 코드를 환경에 맞추어 다르게 빌드를 해주는 것이 장점입니다!
또한 기존 웹팩과 달리 ES6 형태로도 번들링이 가능해졌고,
ESBuild 는 자바스크립트의 어쩔 수 없는 성능의 한계를 부수고자 시도한 번들러입니다. !! !
내부적으로는 Go 언어를 사용해 작성되었고 JS를 기반으로 한 기존의 번들러보다 10배에서 100배 가까운 퍼포먼스를 보여주는 강력한 번들러입ㄴㅣ다!
여기서 vite 는 이 두 가지 번들러의 이점을 섞어 Vue.js 만드신 분이 생성시킨 번들러 !
그렇기에 ESbuild로 성능을 끌어오고 rollup으로 다양한 환경 속에서의 번들링을 제공한다고 생각하면 되겠다!
특성으로는
- 개발 서버 구동의 제로백이 0초에 수렴,,!
- 모든 CommonJS 및 UMD 파일을 ESM으로 불러올 수 있도록 변환!
- 별도의 Configure 없이 다양한 리소스 가져올 수 있음!
- ES6를 타겟으로 하기에 그 이하는 사전 설정이 필요하다!
{root}/index.html이 빌드를 위한 진입점!
이번 프로젝트에서 비트를 사용해보며 느낀 것은 속도가 정말 빠르다!
개발 서버 구동을 하며 콧노래를 부르던 몇 초의 시간이 내 세상에선 없어졌다!
참고
https://bepyan.github.io/blog/2023/bundlers
https://ko.vitejs.dev/guide/
vite 한 번 사용해봐야겠네요!