요즘 떠오르는 빌드 도구인 Vite를 알아보자
Vite
공식문서에서 짧게 두 문장으로 컨셉을 설명하고 있습니다.
주요 특징
-
ESM(ECMAScript Module)을 사용하여 개발 서버를 빠르게 시작하고, 변경된 모듈만 즉시 갱신하는 HMR(Hot Module Replacement)을 제공합니다.
- Vite는 ESM 형식의 모듈을 사용하여 개발 서버를 시작하고, 변경된 모듈만을 빠르게 갱신하여 개발자가 실시간으로 코드 변경 사항을 확인할 수 있도록 합니다.
-
Vite로 개발을 시작할 때, ESbuild를 통해 프로젝트의 dependency를 사전에 번들링하여 로드 시간이 크게 줄어듭니다.
- Vite는 ESbuild를 사용하여 프로젝트의 의존성을 사전에 번들링하므로, 초기 로드 시간이 크게 단축됩니다. 이러한 번들링된 의존성은
.vite디렉토리 내에 캐시되어 있습니다.
- Vite는 ESbuild를 사용하여 프로젝트의 의존성을 사전에 번들링하므로, 초기 로드 시간이 크게 단축됩니다. 이러한 번들링된 의존성은
-
배포 번들링 시 Vite는 Rollup 번들러를 사용합니다.
- Vite는 프로덕션 빌드 시 Rollup 번들러를 사용하여 코드를 번들링합니다. Rollup은 트리 쉐이킹과 코드 압축 등의 최적화 기능을 제공하여 작은 번들 크기와 빠른 실행 속도를 보장합니다.
또한 의존성과 소스코드를 나누어서 개발 서버를 시작합니다.
Vite의 동작 과정
-
서버 구동:
- Vite는 개발 서버를 구동합니다.
-
사전 번들링:
- Vite는
node_modules디렉토리 내의 의존성을 ESbuild를 사용하여 사전에 번들링합니다. 이 과정에서 각 의존성은 ESM 형식으로 변환됩니다.
- Vite는
-
종속성 번들링:
- ESbuild가
main.ts를 엔트리 포인트로 하여 모든 종속성을 번들링합니다.
- ESbuild가
-
HMR:
- 코드나 파일의 변경을 감지할 경우, HMR을 통해 변경된 모듈만 다시 빌드합니다.
ESM
ESM이란?
ECMAScript Modules(ESM)은 JavaScript에서 모듈을 다루기 위한 표준 방식입니다. ESM은 코드 구조를 더 잘 관리하고, 재사용 가능하며, 유지보수하기 쉽게 만드는 방법을 제공합니다. ESM의 주요 특징은import와export키워드를 사용하여 모듈을 가져오고 내보내는 것입니다.
webpack의 경우 commonJs를 사용하고있다. 이는 require() 함수와 module.exports을 이용하는데 동적으로 모듈을 가져오거나 로딩하는 데 제약이 있을 수 있다. 결론은 느림
ESM은 import와 export 사용한다. 이를 통해 정적으로 모듈의 의존성을 분석하고 필요한 모듈만 동적으로 로딩할 수 있다. 빠르다~
HMR
HMR(Hot Module Replacement)은 개발 시 코드를 수정할 때 즉시 변경 사항을 반영하여 새로 고치지 않고도 애플리케이션의 일부를 업데이트할 수 있는 기능입니다. ESM을 사용하면 모듈 간의 의존성을 정적으로 파악할 수 있기 때문에 HMR을 더 효과적으로 구현할 수 있습니다.
HMR은 webpack도 지원하지만 ESM을 사용하면 모듈 간의 의존성을 정적으로 파악할 수 있기 때문에 더 빠르게 작동함 아다리가 잘 맞았나보다
모듈 간의 의존성은 import export 때문에 더 빠르고
commonJs는 require()을 사용해서 동적으로 불러오기 때문에 느림
ESbuild
ESbuild는 매우 빠른 JavaScript 번들러 및 트랜스파일러로, Vite에서 개발 서버를 위한 트랜스파일링에 사용됩니다. ESbuild는 최신 JavaScript 문법을 지원하며, 매우 빠른 속도로 코드를 번들링하고 변환합니다.
ESBuild는 Go로 작성되어있다. <- 빠른 이유가 go언어의 영향이 있다.
개발 서버가 구동 중 ESbuild가 계속해서 코드 및 파일 변경사항을 감지하여 번들링 하는데 이 속도가 10~100배 차이가 남
디펜던시의 사전 번들링도 ESbuild를 사용해서, ESM형식으로 변환 후 사용되어지고, http 헤더에 캐싱시킨다. 그래서 개발 시 페이지를 다시 로드 할 경우 더 빠르게 보여 줄 수 있음
참고 (공식문서)
디펜던시 사전 번들링 기능은 개발 모드에서만 적용되며, esbuild를 이용해 디펜던시를 ESM으로 변환합니다. 프로덕션 빌드의 경우, 이 대신 @rollup/plugin-commonjs가 대신 사용됩니다.
Rollup
Rollup은 Vite에서 프로덕션 빌드를 위한 번들러로 사용됩니다. Rollup은 ESM을 기본 모듈 형식으로 사용하며, 트리 쉐이킹 및 코드 압축 등의 최적화 기능을 제공합니다. 이를 통해 최종 번들 크기를 최소화하고 실행 속도를 높일 수 있습니다.
ESbuild는 개발 서버용으로 번들링 되어 사용되어지지만, 배포 시 Rollup을 사용한다.
vite의 컨셉은 빠른 번들링으로 개발 환경 향상, Rollup으로 최적화 및 다양한 플러그인을 사용 할 수 있어서 빌드시 커스터마이즈가 가능하다는 장점을 보고 채택한 듯 하다.
CRA, Vite 비교
babel같은 경우에는 구형 브라우저에서는 필요하기 때문에, ESM으로 만들어진 rollup, esbuild에는 없다. 그래서 프로덕션 빌드시에는 플러그인에 바벨이 필요하다.
큰 프로젝트에서는 webpack을 다루는 것 같은데, 작은 프로젝트에서는 굳이 빌드에 신경을 많이 쓰지 않았던 거 같다. 그래서 앞으로 그냥 vite 쓸 것 같음
참고한 사이트들
Vite 이야기(Feat.Svelte)
javascript 번들러로 본 조선시대 붕당의 이해
[ JavaScript ] ES Modules 정리하기
차세대 번들러 분석
