Skip to main content

차세대 번들러 비교 및 분석 (feat. webpack, rollup, esbuild, vite)

https://bepyan.github.io/blog/2023/bundlers

번들러 : 여러개의 파일을 하나의 파일로 묶어주는 도구

  • 번들링된 JS파일은 네트워크 요청 1번으로 가능하다.
  • 최적화도 되어 있다.

Vite vs Webpack

ESBuild​

ESBuild는 내부적으로 Go로 작성

  • JS 기반의 번들러(Webpack)보다 10배에서 100배까지 빠른 엄청난 퍼포먼스
  • 메이저 버전이 릴리즈 되지 못했다. ( v 0.21 )
    • code splitting 및 CSS와 관련된 처리가 아직 미비
    • esbuild는 es5 이하의 문법을 아직 100% 지원하지 않습니다.

Vite​

서버구동이 빠른 이유​

1.Dependencies와 Source code 를 분리해서 관리한다.

  • Dependencies는 개발 시작시 내용이 바뀌지 않는 Plain JS소스 코드 이며, ESBuild를

  • Source code : JSX, CSS 또는 Vue/Svelte 컴포넌트와 같이 컴파일링이 필요하고, 수정 또한 매우 잦은 Non-plain JavaScript 소스 코드

  • 브라우저가 요청하는 대로 vite는 Native ESM을 이용해 소스 코드를 제공,

  • 기존 방식은 모든 소스 코드를 바탕으로 번들 파일을 준비해두었다면, Native ESM은 필요한것만 그때그때 제공

2.HMR(Hot Module Replacement)

  • 모든 파일에 대해서 번들링을 하는것은 비효율적이다. HMR 이라는 대안이 나왔다.
  • vite도 HMR 지원, 그 과정에서 ESM을 이용해서 앱 사이즈와 무관함.

3.캐시 기능

  • 소스 코드는 304 Not Modified로, 디펜던시는 Cache-Control: max-age=31536000,immutable을 이용해 캐시

특징​

Vite는 기본적으로 ES6을 타겟으로 번들을 생성한다.

  • ES5이하로 타겟팅 하려면 polyfill를 다뤄야 한다.

기본적으로 index.html 파일이 진입점이다.

Webpack에서 Vite로 넘어갈떄 장점

  • 압도적으로 발전된 개발 환경