번들링 툴 Vite

Vite

npm

js 라이브러리를 모아놓은 플랫폼 => npm 명령어로 쉽게 라이브러리 설치가능
npm init
npm install 라이브러리이름
=> node_modules 생김

• 단점 : node_modules 폴더 짱 큼 / 서버에 그대로 올리면 비효율
• import require문법은 브라우저 친화적이지 않음

이런 js 파일들을 하나로 합치기 : bundling
=> bundling tool 활용

bundling Tool

1. Webpack

• 단점 : npm 라이브러리 많아지면 번들링 짱 오래걸림
  => vite, snowpack (2세대 번들링 툴)

2. vite
   esbuild : Go 로 만든 budler 라이브러리

vite가 빠른이유

1. esbuild를 써서
2. 라이브러리 설치하자마자 미리 bundle 만들어놓음
3. 일부 소스코드는 번들링없이 미리보기 가능
   추가 설치해볼것

• PWA, Lint, 테스팅 라이브러리

최근 번들링의 장점
수정사항 발생시 리번들링 => 최근 HMR기술 : 수정사항만 반영(리번들링x)

vite 사용법

npm create vite@latest
=> select framework

cf

Yarn yet another resource negotiator

• 병렬화로 속도개선
• 자동화된 lock 생성
• 의존성 트리 알고리즘 변경 (npm과 상이)
• 캐시사용

https://velog.io/@otterji/Vite-typescript-%ED%99%98%EA%B2%BD%EC%97%90%EC%84%9C-path-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0
https://youtu.be/iX3Nu1FcZKA?si=9bKXhh8Dl8_2oksL
https://youtu.be/Ds7EjE8Rhjs?si=rFr0AoaXeNx7d3mD