[webpack 미니 발표 3부] Vite는 뭐지?

webpack 미니 발표 시리즈의 마지막~~ vite 는 뭐지?

그 동안 요약

웹팩은 모듈 번들러이다. 
모듈 번들러는?? 웹 어플리케이션을 이루는 수많은 자원들이 있는데, 이것들을 조합하고 압축해서 하나의 결과물로 만들어준다.

웹팩의 필요성
1. 코드 의존성을 따져서 파일들을 압축, 조합해서 웹 어플리케이션을 빠르고 효율적으로 로딩되게 해준다.
2. 변수의 scope(유효 범위) 문제를 해결해준다.
3. 웹 개발 작업을 자동화해준다.

Vite

TMI) 나는 '바이트'로 읽는 줄 알았는데 '비이트'라고 한다.

Vite는 'Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.' 이다. (출처: vite 공식 홈페이지) vite는 빠르고 간결한 개발 경험을 주는 걸 목표로 하는 빌드 도구!!이다. 크게 dev server, 번들링해주는 일을 한다.

웹팩보다 빠르게 개발, 배포할 수 있다 !! 어떻게 그럴 수 있을까? 

ESM(ECMAScript Modules, 자바스크립트 네이티브 모듈)

이를 위해서  ESM에 대해 먼저 말해야 한다. 

ESM은 브라우저 자체에서 모듈 기능을 지원하기 위한 방식(스펙)을 말한다.  import, export를 사용해서 특별한 라이브러리 없이, 자바스크립트 코드를 모듈화해서 작성하면 브라우저가 이해할 수 있게 됐다. 

(더 알고 싶다면- https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Modules)

다시 Vite 

vite는 로컬에서 개발할 때 (dev server를 사용할 때) ESM을 이용한다. webpack은 맨 처음에 개발 서버를 돌리려면, entry 파일부터 시작해서 쭉 관련 있는 모듈들을 묶어야 한다.(모듈 번들링) 모듈이 많아지면 더 오래 걸린다. 그래서 개발할 때 코드 수정한 것을 브라우저에서 확인하려면 몇 초, 몇 분 기다려야 한다.

그런데!!  vite는 엄청난 비법으로 개발 서버가 빠르게 돌아가게 한다. 일단 개발하는 동안 변하지 않는 dependencies는 미리 번들링해두는 것이다! 이때 자바스크립트 기반 번들러보다 수십배 빠른 Go 언어로 작성된 esbuild라는 도구를 사용해서 아주 빠르게 미리 번들링한다. 그리고 개발하면서 계속 바뀌는 코드들은 어떻게 할까? 이 코드들은 동시에 모두 다 필요한 건 아니다. 그래서 ESM 기반으로 코드들을 동작시킨다.  entry부터 시작해서, 그 파일에서 import 된 게 있으면 그 모듈을 서버에 요청하고, 요청하고 그런 식이다. 

출처: https://vitejs.dev/guide/why.html#the-problems

한편 production으로 배포하기 위해서 빌드할 때는 rollup이라는 번들링 도구를 사용한다. 같은 모듈을 import하는 게 이곳 저곳에서 있는데 매번 요청해서 가져오면 비효율적이고, 최적의 퍼포먼스를 내기 위해서는 여전히 번들링하는 게 좋기 때문이다. 

 

Webpack과 Vite

나는  webpack은 안쓰고, vite를 쓰면 되는 구나~ 라고 생각했는데, 오늘 또 회사 동기와 살짝 이야기하다 보니 그게 아닌 것 같기도 하다... 둘 다 쓰기도 하는 것 같고.. 흑흑 헷갈린다..

다음에는 이 둘의 관계를 파헤쳐볼 생각이다!

 

 

참고 자료

https://vitejs-kr.github.io/

Vite

https://joshua1988.github.io/vue-camp/vite/intro.html

Introduction | Cracking Vue.js

https://engineering.ab180.co/stories/webpack-to-vite

Webpack → Vite: 번들러 마이그레이션 이야기