솔루션 개발에 Vue.js 도입 테스트 결과

Vue.js는 SPA(single page application)을 만드는데 좋습니다. 
화면 전환시 깜빡임이 없으며, 프론트가 백엔드로 부터 완전히 분리 할수 있게 해줍니다.
또한 react나 angular의 비해서 가볍고 CDN으로 쉽게 적용할 수 있다는 장점도 있습니다.


이렇게 좋은 Vue.js를 솔루션 개발에 도입하면 개발 및 유지관리에 이점이 상당할 것으로 판단되었습니다.
하지만 아무리 가벼운 Vue.js라도 랜더링 과정이 있는 만큼 성능을 최우선으로 하는 솔루션 개발에서도 사용이 가능할지 테스트가 필요 했습니다.


테스트 조건은 다음과 같이 준비 했습니다.
- Vue.js가 적용된 가상의 쇼핑몰을 준비
- MVC 방식의 비교군 준비
- html 및 css 는 최대한 동일하게 준비
- 실무에서 처럼 각종 폰트 및 CDN 연결



테스트 결과는 실망 스러웠습니다. 
약 10% 내외에 성능 저하를 예상 했지만, 예상과는 달리 50%를 왔다 갔다 했습니다.

어쩌면 이 테스트는 당연한 결과일지도 모릅니다.
Vue.js에서의 페이지 분리는 router를 통해 이뤄지며, 페이지는 컴포넌트 입니다.
Vue.js에서는 페이지 첫 로딩 시에 모든 컴포넌트를 불러와야 하며, 
WAS(web application server)와 API로 데이터를 주고 받는 상황이 많아지기 때문 입니다.

SPA와 같이 적은 수의 페이지를 가지는 경우, Android 및 ios Application 등을 개발하는 경우에는 적합하지만,
페이지 수가 많은 경우, 지속적으로 페이지 및 기능이 많아지는 경우, 디바이스에서 캐시 데이터를 저장하지 못하거나 금방 잃어 버리는 경우에는 적합하지 않습니다.


워크식스는 솔루션 개발 회사 입니다.
개발에 대해 궁금한 점은 홈페이지로 문의 바랍니다.

 

 

 

copyright ⓒ 2019. 워크식스