[vue.js] 5.8kb 에 불과한 Vue의 대체 배포판 petite-vue에 대해 알아보자

기존 서버렌더링 프로젝트에 점진적으로 vue를 도입할때 유용하다

매우 가볍고(5.8kb) 표준 vue의 핵심 기능을 지원한다. cdn 으로 제공하기 때문에 기존 서버렌더링 프로젝트에 Vue를 점진적으로 도입하고자 할때 적합한 도구가 될 듯하다. 주요 특징은,

  • 점진적 향상을 위해 최적화 된 불과 5.8kb 크기의 Vue의 대체 배포판.
  • 표준 Vue와 동일한 템플릿 문법반응 멘탈 모델을 제공.
  • 서버 프레임 워크에 의해 렌더링 된 HTML 페이지에 작은 상호 작용들을 분배하도록 특별히 최적화되어 있음.
  • ref(), computed() etc.
  • Render 함수(petite-vue는 가상돔을 지원하지 않는다)
  • 컬렉션 타입들(Map, Set, etc.)을 위한 반응성
  • Transition, KeepAlive, Teleport, Suspense
  • v-for 의 destructure 기능
  • v-on="object"
  • v-is & <component :is="xxx">
  • v-bind:style auto-prefixing : v-bind:style에서 자동으로 브라우저 별 벤더 prefix를 붙는 기능.
  • petite-vue는 단지 작은 것이 아니라 몇 가지 사용 사례에 최적화된 구현
  • 표준 Vue는 빌드 단계를 포함할 수 있다. 빌드 단계를 포함하는 경우 모든 템플릿이 사전에 컴파일 되고 런타임에 컴파일 처리가 필요없다. 그리고 트리 쉐이킹으로 사용하지 않은 기능에 대해 번들 사이즈를 줄이는 기능을 사용할 수 있다. 많은 상호작용이 필요한 앱의 경우 표준 Vue를 사용하는 것이 좋다.
  • 빌드단계를 포함하지 않은 경우 훨씬 덜 최적화될 텐데 petite-vue는 직접 세분화된 반응 효과를 연결하여 이와 련된 오버헤드를 방지한다.
  • 이것은 Vue 1 이 작동하는 방식이기도 하다. 플랫폼과 무관한 렌더링이나 자바스크립트 SSR 에 적합하지 않다. 그리고 고급 추상 기법을 위한 render 함수 기능을 사용할 수 없다.

사용법은 문서에 자세히 나와 있으니 그걸 참고 할것.

기존 서버렌더링 프로젝트에 Vue를 도입하고 싶은데, 인터렉션이 많은 페이지가 별로 없고 프론트엔드 인력도 많지 않다면 점진적으로 vue를 도입할때 유용할 듯하다.

이 글이 마음에 드셨다면 👏🏽👏🏽와 커피한잔 후원하기 (카카오페이), 이메일로 소식을 받아보고 싶으시다면 ✉️ 이메일 구독하기 해주세요. 그리고 저희 회사에서 프론트엔드를 포함한 개발자분들 채용중입니다.

Vue.js 관련 이야기들 | working at habitfactory.co | 커피한잔 후원하기 https://bit.ly/355PDlu | 이메일 구독하기 https://bit.ly/3ax32Fn

Vue.js 관련 이야기들 | working at habitfactory.co | 커피한잔 후원하기 https://bit.ly/355PDlu | 이메일 구독하기 https://bit.ly/3ax32Fn