Vite란?
💡 Vue의 창시자 에반유가 만든 빌드 도구로 프랑스어로 빠르다라는 의미를 가지고 있습니다.
Vite의 탄생 배경
자바스크립트는 여러가지가 부족한데 그 중에 특히 모듈이 없었습니다.
(그 때는 자바스크립트로 이렇게 큰 프로젝트를 하게 될 줄 몰랐기에..)
1. CommonJS의 등장
node가 등장하면서 require 함수와 module.export를 사용하는 CommonJS라는 모듈 방식이 만들어졌습니다. 또한 npm이 등장하면서 만들어진 모듈을 모두가 공유할 수 있게 되며 모듈화의 본격화가 시작됩니다.
/// CommonJS 방식
const path = require("path")
module.export = function() { ... }2. 하지만 모듈은 너무 느린걸요..
서버와 다르게 브라우저는 모듈을 매번 새로 불러 와야 했기에 로딩과 비동기의 문제가 있었습니다. import가 나오고 브라우저에서 모듈을 쓸 수 있게 되었으나 브라우저 특성상 js파일을 잘게 동시에 여러 파일을 호출하게 되면 속도 문제가 발생했습니다. ( 특정 js 파일에서 문제가 생기면 전체 지연이 일어나는 것은 덤.. )
3. 번들러 등-장
💡 여러개 파일을 비동기로 로딩을 하는게 문제라면 그냥 처음부터 파일을 하나로 합쳐서 전달하는 건 어떨까?
그렇게 해서 대규모 협업 개발에 유리할 수 있도록 모듈과 같이 방식으로 여러개의 파일을 나눠서 개발을 할 수 있게 있도록 하고 모든 파일을 하나로 합쳐서 하나의 번들(bundle)로 만들어내는 번들러라는 개념이 탄생하게 됩니다.
이러한 번들러는 기존의 모듈 방식의 문제점을 해결할 수 있었지만 가장 문제가 되는 건 바로 속도였습니다. 기존에는 그냥 js를 작성만 하면 바로 브라우저에서 실행이 가능했지만 이제는 모든 파일들을 하나로 만들어주는 작업을 선행 해야했기 때문에 수정을 할때마다 매번 새롭게 빌드가 필요했죠..
4. 와! esbuild!
esbuild는 겁나 빠릅니다. 100.배.나.
하지만 esbuild는 빌드만 빠르지 현업에서는 쓰이지 않았는데요, 웹팩을 대체하기에는 통합적인 기능을 제공하지 않았기 때문입니다. ( HMR, 트리셰이킹, HTML, CSS, asset 지원 등.. )
?? : 저, 그럼 빌드만 esbuild로 하고 기존의 프로덕션 번들은 웹팩으로 하면 안되나요?
그래서 나온 것이 바로..
5. 개발은 esbuild로, 프로덕션 빌드는 Webpack으로!
esbuild와 webpack의 장점을 모두 차용한 Snowpack이 등장합니다.
Snowpack은 esbuild를 통해 개발 모드를 지원했고 프로덕션 빌드는 webpack을 채택하여
쾌적한 개발 환경과 편리한 번들을 모두 제공할 수 있었습니다.
Svelte는 당시 Rollup을 번들러로 채택하고 있었는데 당시 Rollup은 HMR을 지원하지 못했기 때문에 Snowpack과 Svelte가 만나게 됩니다. 완벽한 줄 알았던 Snowpack은 안정성 측면에서 부족하였고 이에 안정성을 보완한 Vite가 드디어 나오게 됩니다.
6. Vite의 탄생!
Vite는 esbuild와 브라우저 모듈을 이용한 개발모드, 개발서버, 프록시 서버, 번들 툴, 코드 스프리팅, HMR 등 지금까지 나왔던 snowpack의 컨셉과 다른 번들도구들에서 제공하는 기능을 한데 모은 프론트엔드 번들 도구를 만들게 됩니다.
그리고 이렇게 만들어진 Vite는 기존의 나왔던 번들러들의 컨셉을 모두 흡수하면서도 간결한 사용방식과 더불어 안정성, 그리고 훌륭한 문서를 제공함으로써 2021년 가장 만족도가 높은 번들 툴이 됩니다.
