모듈과 모듈 번들링
양한 빌드툴의 출시 배경 : 네이티브 자바스크립트 모듈
💡 네이티브 자바스크립트 모듈???- 번들러가 지원해야하는 기능
- 네이티브 자바스크립트 모듈을 위한 일급 객체 지원
- 타입스크립트 컴파일
- JSX
- 확장 가능한 플러그인 API
- 내장된 개발 서버
- CSS-in-JS 라이브러리를 위한 CSS 번들링
기존 존재하는 도구들과의 차이점
- 기존의 번들러(webpack, Rollup, parcel) : 모두 소스 코드와 node_modules 폴더의 전체 코드 베이스를 번들로 묶고, 빌드 프로세스(babel, typescript,postCSS)를 통해 실행한 다음 번들된 코드를 브라우저에 제공한다. 이 모든 작업으로 인해, 캐싱 및 최적화 작업을 하더라도 대규모의 크롤링을 하는 개발 서버를 느리게 만들 수 있다.
- 새 번들러(snowpack, vite,wmr) : 브라우저가 삽입 구문을 찾고 http로 해당 모듈을 요청할 때까지 기다린다. 이 요청이 이루어진 후에만 도구는 요청된 모듈과 모듈의 가져오기 트리에 있는 모든 잎 노드에 변환을 적용한 다음 이를 브라우저에 제공한다. 이렇게 하면 개발 서버로 푸시하는 과정에서 작업이 줄어들기 때문에 작업 속도가 빨라진다.
- esbuild : 다른 도구들처럼 번들링을 우회하지 않고 비용이 많이 드를 변환을 피하고 병렬화를 활용하며 Go언어를 사용해 빠르게 코드를 작성한다.
Vite
브라우저가 ES modules를 지원함에 따라 일반적인 번들링 과정을 생략한다.
프로젝트의 모든 의존성을 esbuild를 이용해 단일 기본 자바스크립트 모듈로 사전 번들링을 진행한다. 그 후에 많은 캐시 된 HTTP 헤더와 함께 제공된다. 즉, 첫 페이지 로드 후 가져온 의존성을 컴파일, 제공 또는 요청하는 데 시간이 낭비되지 않는다. 또한 Vite는 명확한 에러 메시지들을 제공하고 문제를 해결하기 위해 정확한 코드 블록과 줄 번호를 보여준다.
- hot module replacement
reference
한약은 거들뿐