DEVLOG
vite란? : 빠른 빌드를 원한다면 본문
vite [비트]
처음 프로젝트에 도입했을 때 팀내에서 이걸 바이트라고 불러야할지 비트라고 불러야할지부터 어색해서 처음에는 다들 바이트라고 부르다가,
프랑스어로 "빠르다(Quick)"를 의미하며, 발음은 "veet"와 비슷한 /vit/ 입니다.
공식 홈페이지에도 이 부분이 정리가 되어있어서 이걸 공유하고 나서부터 비트라고 부르기 시작했다.
vite란
이름의 뜻도 빠르다인 vite는 말그대로 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이다. 시작은 vue를 위한 빌드도구로 시작했지만 현재는 vanilla, vue, react, preact, lit, svelte에서 사용이 가능하며, 물론 javaScript, typeScript도 모두 사용이 가능하다.
(클릭시 온라인에서 Vite를 체험해볼 수 있습니다.)
| JavaScript | TypeScript |
|---|---|
| vanilla | vanilla-ts |
| vue | vue-ts |
| react | react-ts |
| preact | preact-ts |
| lit | lit-ts |
| svelte | svelte-ts |
vite가 좋은 이유?
모듈번들러 중 하나인 vite가 왜 좋은지 정리하기 이전에, 모듈번들러에 대해 정리해보았다.
모듈 번들러
먼저 번들러가 하는 일은 여러개로 나뉘어져있는 파일들을 하나로 합쳐준다는 개념이다.
그렇다면 왜 하나로 합쳐야할까?
이는 http요청과 관련이있다. 웹페이지가 로드될 때 각각의 파일을 네트워크를 통해 요청해 받아와야한다. 흩어진 css, js, 이미지 등 여러개의 파일을 요청받으려면 비효율적으로 많은 커넥션이 발생하고 성능문제가 발생할 수 있다. 이렇게 여러개로 흩어진 파일을 하나의 js파일로 묶어낸다면 이러한 문제를 해결할 수 있고, 이 문제를 번들러가 해결해준다.
또한, 예전에는 자바스크립트에서 모듈로 가져오거나 내보내는 방법이 없었기 때문에 기능에 따라 각각의 파일에 코드를 작성한 후 script를 연결해주어야 했다. 하지만 이 방법의 경우 script 파일의 순서가 중요하고 변수가 전역으로 사용되며 발생할 수 있는 문제들이 있다.
마침내 자바스크립트에도 모듈패턴이 등장하면서 자바스크립트에서 모듈화 프로그래밍이 가능해졌다. 모듈 단위로 기능을 구분하여 코드를 작성하고 이렇게 흩어진 코드를 모듈번들러를 통해 하나의 파일로 만들어내면 코드를 작성할때 가독성을 높이고, 유지보수를 쉽게 할 수 있으며 네트워크 요청 시에는 하나의 파일로 요청할 수 있다.
정리
결론적으로 모듈단위로 구분되어 있는 js코드와 html, css, 이미지 파일들을 각각 하나의 모듈이라고 할 때 여러 개의 파일을 하나로 합쳐주거나 의미 있는 단위로 묶어 주는 것을 번들링이라고 하는데 그 역할을 모듈 번들러가 해준다.
현재 프론트엔드 개발 생태계에서는 모듈 번들러로 대부분 webpack을 사용하고 있다.
webpack
웹팩은 서드파티 라이브러리 관리나 css전처리 이미지 에셋관리등에 있어서 우수하고 개발 생태계에서 정보가 굉장히 풍부하고 안정적이라 많은 사람들이 사용하는 모듈번들러다.
모든 모듈을 함수로 래핑하는 방식이고, 하나의 시작점(Entry point)으로부터 의존적인 모듈을 전부 찾아내서 하나의 파일로 만든다. 웹팩은 자바스크립트밖에 모르기 때문에 css나 이미지 등 js가 아닌 파일들은 웹팩이 이해할 수있도록 로더와 플러그인을 함께 사용해주어야 한다.
vite
하지만 애플리케이션이 점점 더 발전함에 따라 처리해야 하는 JavaScript 모듈의 개수도 극적으로 증가하고 있다. 기존 번들러 기반으로 개발을 한다면 수많은 모듈을 모두 번들링하여 개발서버를 가동하는데에는 비합리적으로 오랜 시간이 필요하고, 개발자들은 이런 시간을 기다리기 힘들어 한다.
vite는 이러한 것에 초점을 맞춰, 브라우저에서 지원하는 ES Modules(ESM) 및 네이티브 언어로 작성된 JavaScript 도구 등을 활용해 문제를 해결하여 빠른 속도의 개발서버구동과 빠른 빌드속도를 제공하게 된다.
그렇다면, vite는 왜 빠를까?
vite가 빠른 이유는 크게 다음 두가지가 있다.
01. esbuild
vite는 사전 번들링을 통해 각 파일에서 필요한 모듈만을 추출하는데, 이때 사전 번들링은 Esbuild를 통해 진행된다. Go로 작성된 Esbuild는 작업을 병렬로 처리하기 때문에 Webpack, Parcel과 같은 기존의 번들러 대비 10-100배 빠른 번들링 속도를 보인다.
02. ESM
vite는 로컬에서 개발할 때 번들링을 하지 않고 ESM 방식을 사용하기 때문에 로컬 서버 구동 속도가 매우 빠르다.
ESM은 모듈화 문법인 import, export를 별도의 도구 없이 브라우저 자체에서 소화해 낼 수 있는 모듈 방식을 의미한다. 다시말해, 브라우저가 곧 번들러라는 말.
vite는 그저 브라우저의 판단 아래 특정 모듈에 대한 소스 코드를 요청하면 이를 전달할 뿐이다. 따라서 조건부 동적 import 이후의 코드는 현재 화면에서 실제로 사용이 되어야만 처리가 된다.
📄 ESM 예제
번들러 없이 이 코드는 실행되지 않는다.
// app.js
import { sum } from './math.js';
console.log(sum(10, 20));
<script src="./app.js"></script>하지만 type="module"을 추가하면 정상적으로 동작한다.
브라우저에서 import와 export를 소화할 수 있는 능력이 바로 ESM이다.
<!-- type 속성을 지정하면 정상적으로 동작한다. -->
<script type="module" src="./app.js"></script>
웹팩 데브 서버는 처음 로컬 서버를 시작할 때 관련 있는 모듈들을 번들링 해서 메모리에 적재하는 시간이 필요하기 때문에 당연히 어느 정도의 시간이 필요하다. 또한 파일이 수정될때마다 번들링 과정을 다시 거쳐야 한다.
반면 vite는 번들링을 하지 않고 바로 서버를 실행하기 때문에 명령어를 실행함과 동시에 서버가 바로 구동되기 때문에 속도가 빠르다. vite에서는 어떤 모듈이 수정되면 vite는 그저 수정된 모듈과 관련된 부분만을 교체할 뿐이고, 브라우저에서 해당 모듈을 요청하면 교체된 모듈을 전달할 뿐이다.
webpack vs vite 속도 비교
로컬 구동 속도가 webpack 40초 이상 걸리던 프로젝트에 vite를 도입하여 로컬 구동 속도를 3초이내로 줄여보는데에 성공했다.👍🏻
참고
