번들링 툴 Vite

웰디(Well-D)·2023년 9월 19일
0

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세대 번들링 툴)
  1. 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

profile
Wellness 잘사는 것에 진심인 웰디입니다. 여러분의 몸과 마음, 통장의 건강을 수호하고싶어요. 느리더라도, 꾸준히

0개의 댓글