잊어버렸을 미래의 나를 위한 정리..✍🏻

---

💜상황

• npm 사용 시 node_modules 폴더의 용량 너무 큼
• import, require 문법 브라우저 친화적이지 않음 (호환성 별로, 지원도 잘 안함)

⚡해결책 : 번들링

• 필요한 라이브러리 파일들을 js 파일 하나로 합쳐서 용량 절약
• 결과물은 js 파일 하나이기 때문에 import, require 필요 X
• 보통 npm + webpack(번들링 툴)으로 사용

npm run build

⚡번들링의 문제점

• npm 라이브러리 많아지면서 Webpack 번들링 시간 많이 소요
• 파일 하나가 수정되면 전체가 재번들링됨

💜Vite

• Webpack의 단점인 속도와 용량 해결하고 빠른 속도로 번들링을 해주는 툴
• Go로 만든 빠른 bundler 라이브러리인 esbuild 사용
• 라이브러리 설치하자마자 미리 bundle 만듦
• 작성한 소스코드는 번들링하지 않고 미리 보여줌
• 파일 하나가 수정되면 변경 사항만 반영됨 (HMR)

⚡세팅

npm create vite@latest