Vite에 몸을 맡겨라

Vite 왜 쓸까?

좋은것 같긴해 빌드 속도도 빠르고 개발서버 구동 속도도 쾌적하다. webpack.config에 비해 vite.config 설정법이 직관적이기도 하고

만들어진 플러그인을 import해서 그대로 쓰면 원하는 목적을 달성하는데도 금방임

느낌적인 느낌은 여기까지 적어보고 정리 스근하게 해본다.

 

Native Module

Vite는 JS 네이티브 모듈을 기반으로한 데브 서버임

CRA같은 보일러 플레이트를 이용하거나 웹팩과 같은 번들러, 바벨 트랜스파일러등을 설치해 개발 환경을 직접 설정해줄 수 있지만, 빠른 개발가능..빠른 배포 이게 JS 네이티브 모듈때문에 빠르다는 것임



번들링

ESM(EcmaScript Module)등장 이전엔 JS언어 레벨에서 모듈화 방식 없었음

require.js, 즉시실행함수(IIFE) 사용안했으면 모듈화 불가능임 

즉시실행함수로 감싸면 함수 스코프를 가지게 되며, 외부로 공개하고 싶은 데이터만 공개가능 이를 통해 데이터 은닉을 통한 캡슐화를 수행했음 (클로저를 통한 은닉화와 캡슐화 / mdn에 좋은 예시가 있음)

 

이와 같은 문제를 해결하고자 Webpack, Parcell, Rollup과 같은 번들러가 등장한 것임

IDE에서 js를 파일단위로 관리하는데 html 문서내 각 스크립트 로드하고 나중에 보면 전역 네임스페이스를 공유하니 다른 파일에서 선언한 변수 참조가 가능함.

 

요즘 FE 생태계 특성상 SPA가 등장함에 번들링은 빠지지 않음 페이지 렌더링을 브라우저에 위임하여 하나의 html문서위에 JS를 통해 라우팅을 수행함.
기존 SSR방식을 생각해본다면 필요한 페이지 정보를 매번 불러왔으니 네트워크를 통해 필요한 리소스를 다운로드 받고 실행한다면 사용자에게 빠르게 서비스를 제공할 수 없음.

 

다른걸 공부하러 가야해서 나머지 내용은 내일 퇴근하고 작성하겠다.

 

참조

https://joshua1988.github.io/vue-camp/vite/intro.html#vite%E1%84%85%E1%85%A1%E1%86%AB

Introduction | Cracking Vue.js

역시 갓 캡틴판교 최고여