webpack vs vite

👀 모듈? 모듈 번들러?

모듈이란 분리된 파일을 의미한다.

 

• 웹 사이트를 만들고 배포를 하면 사용자들이 브라우저를 통해 웹 사이트에 접근한다.
• 이 때, 브라우저는 사용자에게 UI를 보여주기 위해 서버에 자원을 요청한다.
• 모듈을 계속해서 분리하면 그만큼 브라우저에서 서버로 요청하는 파일의 개수가 증가하게 되는데,
  이는 네트워크 비용 증가와 페이지 로딩 시간을 증가시켜 사용자 경험에 안좋다.

=> 브라우저에서 서버로 요청하는 http 개수를 줄이는 작업이 필요하다.

 

번들링 : 개발할 때는 모듈을 분리해서 개발하고, 배포하기 전에 모듈들을 하나로 묶어주는 작업

모듈 번들러 : 번들링 작업을 해주는 툴 

 

따라서 모듈 번들러를 사용해서

1. 파일 개수를 줄여, http 요청을 줄이는 동시에 로딩 속도도 줄일 수 있고
2. JS 압축, CSS 전처리 변환과 같은 작업을 자동화 할 수 있다!

---

👀 Webpack

• JS 뿐만 아니라 CSS, 사진 등 복잡한 의존성을 관리
• 다양한 플로그인을 통해 기능을 확장할 수 있음
  ex) Babel을 이용해서 최신 JS 문법을 구 버전 브라우저에서도 사용 가능 하도록 트랜스파일링
• 개발 중에 코드 변경을 즉시 반영할 수 있는 HMR(Hot Module Replacement) 지원
• 사용하지 않는 코드를 제거하는 Tree Shaking을 통해 번들 크기 줄임
• 원할 때만 모듈을 로딩할 수 있는 Dynamic Loadingm Lazy Loading이 가능함
• Code Splitting을 통해 번들 파일을 여러개로 쪼개서 초기 로드 시간 줄임

webpack 자바스크립트 기반으로 만들어진 툴이여서 성능상의 한계가 존재한다.

그래서 만들어진게 ESBuild이다.

---

👀 ES Build

ESBuild는 내부적으로 Go로 작성되었고(low-level language), JS 기반의 번들러보다 10~100배 빠르다.

• 네이티브 코드 방식 사용
• 병렬처리 최적화
• 메모리 사용 최적화
• 자체 JS 파서 사용

위와 같은 장점들이 존재하지만, 유연하지 못하고 안정성 관련 이슈가 존재한다.

ESBuild의 단점을 보완한 라이브러리가 vite이다!

---

👀 Vite

• ESBuild로 파일들을 통합하고 rollup을 통해 번들링
• 브라우저가 파일을 로드할 때, 다른 모듈을 import 한다면 즉시 요청하고 로드하는 on-demand 방식
• 변경 사항만 반영해서 다시 번들링 함
• Vue.js, React.js 등 다양한 프레임워크와 호환됨
• CSS 빌드 최적화

---

👀 HMR? ESM?

👉🏻 HMR

HMR: 모듈을 전체 페이지를 새로고침하지 않고, 실행 중인 애플리케이션에 업데이트 할 수 있는 기능

vite는 번들을 두 가지 부분으로 분류한다.

1. 외부 의존성
   개발하는 동안 변경되지 않는 자바스크립트를 의미한다.(ex - node_modules)
   webpack은 브라우저의 요청 이전에 모든 자바스크립트 모듈을 처리하지만,
   vite는 ESBuild를 이용하여 외부 의존성만 미리 번들링 해둔다.
2. 내부 프로젝트 코드(ES Module)
   vite는 네이티브 ESM을 통해 소스 코드를 제공한다.
   브라우저에게 번들러 작업의 일부를 인계하고,
   브라우저 요청 시 마다 소스코드를 변환하고 제공하기만 하면 된다.

서버가 시작되기 전에 코드를 번들링하여 시간을 소비하지 않는다는 것이다.

 

또한 vite는 번들러가 아닌 네이티브 ESM을 기반으로 HMR을 구현한다.

따라서 모듈이 수정되면 vite는 수정된 모듈과 관련된 부분만 교체한다.

 

=> 프로젝트의 크기가 커져도 HMR 갱신 시간에는 영향을 끼치지 않는다.

 

 

👉🏻 ESM

 

이전에는 script 파일을 전역 스코프처럼 사용했다.

( <script> 태그로 자바스크립트 파일을 로드하고, 파일 위치에 영향 받음 )

이는 변수 충돌이나 모듈 간의 관계가 불명확해서 유지 보수에 어려웠다.

 

ESM은 ES6에 도입된 모듈 시스템으로 

import, export를 통해 자바스크립트 파일끼리 접근할 수 있다.

 

=> import - export라는 명시적인 관계로 의존성을 파악하기 쉬움

---

👀 Webpack vs Vite

- 개발 서버 속도

webpack은 소스 코드와 모든 종속 관계의 모듈을 번들링 한 후, 서버가 준비된다.

vite는 esbuild로 미리 번들링 한 모듈을 필요할 때 동적으로 가져와서 서버가 즉각적으로 구동된다.

 

- 프로덕션 빌드

webpack은 각 모듈을 범위마다 함수로 맵핑하여 결합한다.

vite는 하나의 파일에 모든 종속 모듈을 전역 범위로 선언하여 결합하기 때문에 중복이 제거되어 가볍고 빠르게 빌드할 수 있다.

 

- HMR

둘 다 HMR을 지원하긴 하지만,

webpack은 전체 파일을 다시 번들링하고

vite는 변경된 부분만 다시 번들링한다.

---

👀 그럼 Vite 쓰면 되나요?

번들링 속도 측면에서는 vite가 좋지만, 마이그레이션과 안정성 측면에서 문제가 있다.

vite는 개발 환경에서는 esbuild 사용, 프로덕션 환경에서는 rollup으로 번들링한다.

 

=> webpack에서 vite로 마이그레이션 하면 rollup config 설정해야 한다는 번거로움이 존재한다.

또한 webpack에서 사용하는 복잡한 설정이나 플러그인이 vite에서 지원되지 않을 수도 있다.

 

또한 개발 환경과 프로덕션 환경이 달라, 빌드 안정성이 떨어진다.

 

따라서 이미 webpack으로 구성된 프로젝트라면 그대로 webpack을 사용하고,

플러그인 설정 등의 최적화를 통해 빌드 속도를 개선하는게 더 나은 방법일 수 있다.