번들러 Vite!

2022년 4월 25일에 개인 노션 기록한 글을 옮겨온 것

번들러(Bundler)와 번들링(Bundling)

• 번들링 : 여러 파일들을 하나의 파일로 모아주는 것.
• 다양한 자바스크립트 라이브러리를 한 프로젝트에서 사용 → 여러 자바스크립트 파일들을 관리해야함 → 파일 개수만큼 요청해야 함 → 요청횟수가 많아지면 비효율적이기 때문에 하나로 묶어서 웹서버에 올림.최초 진입점인 javascript 파일을 읽어서 그 파일이 참조하고 있는 다른 여러 형식의 파일들을 하나로 묶어 최종적으로 js, css, jpg, png로 만든다.
• 번들러를 사용하면 번들링을 할 수 있음.ㅎㅎ
• 이제는 단순히 번들링의 역할만 하는 것이 아니라, 트랜스파일링(TS→JS), 용량 압축과 구형 브라우저 지원등의 기능을 함께 제공함

최초 진입점인 javascript 파일을 읽어서 그 파일이 참조하고 있는 다른 여러 형식의 파일들을 하나로 묶어 최종적으로 js, css, jpg, png로 만든다.

 

Webpack

• 현재 제일 많이 사용되는 번들링 도구
• 10년동안 개발, 관리되며 Plugin, Loader등 생태계가 잘 갖춰져 있다.
• Code Splitting이나 Tree Shaking 등을 잘 지원한다.
• 다양한 Boilerplate에서 쓰고 있어 자료가 많다 (CRA 등)
• Cold-Starting* 방식으로 개발 서버를 구동할 때, 애플리케이션 내 모든 소스 코드에 대해 크롤링 및 빌드 작업을 마쳐야 실제 페이지 제공 가능.
• (* Cold-Starting: 최초로 실행되어 이전에 캐싱한 데이터가 없는 경우를 의미)
• node.js 기반이고, node.js는 싱글 스레드 구조이다 보니 처리 한계가 발생.

 

Vite (빝)

• 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구
• 원래 Vue를 위해 만들어졌으나 다른 프레임워크와 라이브러리 지원.
• ES Module을 사용하며, 다양한 기능 제공 ex. HMR, Typescript, JSX
• Rollup 기반의 빌드 커맨드 사용

 

Vite는 빠름

• Dependencies와 Source Code를 분리하여 빌드
• Dependencies: 개발 시 내용이 바뀌지 않음.
  • Esbuild*로 사전번들링을 함.
  • (* Esbuild : Go로 작성됨. Webpack, Parcel과 같은 기존의 번들러 대비 10-100배 빠름.)
  • 프로젝트에 매우 큰 비중을 차지하고, 시간이 많이 필요함. 번들링 과정이 매우 비효율적임.
• Source code: JSX, CSS 또는 Vue/Svelte 컴포넌트와 같이 컴파일링이 필요하고, 수정 또한 매우 잦음.
  • Native ESM을 이용해 소스 코드를 제공. ⇒ 브라우저가 곧 번들러.
  • 브라우저의 판단 아래 특정 모듈에 대한 소스 코드를 요청하면 이를 전달함.-
• 기존의 번들러 기반으로 개발을 할 때, 소스 코드를 업데이트하게되면 번들링 과정을 다시 거쳐야했고, 따라서 서비스가 커질 수록 소스 코드 갱신 시간 또한 선형적으로 증가할 수 밖에 없음.
• vite는 HMR을 번들러가 아닌 ESM을 이용해서 지원함. 어떤 모듈이 수정되면 vite는 수정된 모듈과 관련된 부분만 교체하고, 브라우저에서 해당 모듈을 요청하면 교체된 모듈을 전달할 뿐.
• 앱사이즈가 커져도 HMR을 포함한 갱신시간에는 영향을 끼치지 않음.
• HTTP 헤더를 이용해 퍼포먼스를 높이기도 함(캐시 정책)

 

But, 배포시에 번들링 과정이 필요

• 비교적 최근에야 지원되기 시작했기에 실제 배포 시 사용이 불가능한 브라우저 환경이 있을 수 있음.
• 네트워크를 통해 필요한 시점에 해당 모듈을 요청하기에, HTTP/2를 이용하더라도 오버헤드가 발생될 수 있음.
• 모든 사용자 경험을 충족시키기 위해서라도 배포 시에는 번들링 과정이 필수적.
• 빌드 커맨드, 빌드 퍼포먼스 최적화

 

번들링에 Esbuild를 사용하지 않는 이유

• 빠른 속도로 번들링이 가능하다는 장점이 있지만, 코드분할이나 CSS관련 처리 미비.
• Vite에서 사용중인 Rollup은 조금 더 검증된 상태 + 유연한 처리가 가능.
• 향후 Esbuild가 안정화되었을 때 프로덕션 번들링을 변경할 수도 있음.
• (+사족) 그래서 개발환경만 빨라진다는 게 이론상 맞는 말인 것 같은데, webpack에서 vite로 바꾸고 빌드 속도도 빨라졌다는 얘기가 많음. 네틀리파이 빌드 속도도 30% 정도 빨라졌다고 함

 

참고 자료

https://youtu.be/iX3Nu1FcZKA

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

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

https://ui.toast.com/weekly-pick/ko_20220127

차세대 빌드 도구 비교

https://vitejs-kr.github.io/guide/why.html

https://vitejs-kr.github.io/guide/why.html

https://www.peterkimzz.com/rollupjs-lets-start-bundling/

Rollup.js - 번들링, 파일을 하나로 합쳐보자

https://tech.weperson.com/wedev/frontend/bundling-transpiler/#webpack

Bundling & Transpiler | 위펄슨 기술 블로그