Vue CLI와 CDN을 통한 Vue는 각각 어떨때 사용하는건가요?

2019. 01. 10. 13:26

대부분의 Vue 초심 튜토리얼들은 Vue CDN을 사용합니다. 그러나 대부분의 실무자분들을 보면 다들 Vue CLI를 사용하시더라구요.. 그런점에서 볼때 Vue CDN은 가볍게 토이프로젝트나 1회성 프로젝트같이 규모가 크지 않은곳에서 사용하는 것 같고, Vue CLI는 규모가 큰 팀 프로젝트나 메인 프로젝트 등에서 사용하는 것 같은데 제가 잘 파악한것이 맞는걸까요? 각각의 장단점을 알려주세요!

공유하고 돈벌기 ♥︎

총 2개의 답변이 있습니다.

질문자 채택 답변
ISP Software

잘 파악하신 것 같습니다.

CDN으로 vue를 가져와도 vue의 기능을 모두 사용할 수 있지만
CDN도 결국 서버에 보내는 하나의 request 입니다. 브라우저는 한 시점에 5개의 request를 요청할 수 있습니다. CDN으로 가져오면 request가 하나 늘어나는 것이나 다름 없으므로 url로부터 리소스를 가져올 것이 많은 경우에는 결과적으로 페이지를 볼 수 있을 때까지 조금 더 기다리게 되겠죠.

대규모 응용 프로그램 같은 경우에는 js모듈이 많기 때문에 대부분 module bundler 를 이용하게 되죠. NPM으로 vue를 땡겨서 webpack 같은 걸로 관리하게 되는데, Vue CLI로 가져오게 되면 이런것 크게 신경쓸 것 없이 미리 다 세팅이 되어 있습니다. 그리고 개발시에 핫 리로드, lint-on-save 이런 기능 대부분 쓰실 텐데 이런 설정도 싹 다 되어있죠.

webpack 같은 모듈 번들러만 쓰는 경우에는 특별히 세팅해주시지 않으면 빌드 후에 app.js 와 같이 모든 js가 하나의 파일로 묶이는데 이게 용량이 금방 늘어납니다. chunk로 split 해주는걸 모르면 js파일만 10MB 넘어가는 거 순식간이더라구요.

저희 회사는 nuxt 사용하는데 code splitting 까지 자동으로 되는 것 같습니다. 설정하는 데 시간 거의 안쓰고 곧바로 개발할 수 있는 점이 참 좋은 것 같아요.

2019. 01. 10. 13:56
40
OpenSG 수석 컨설턴트

script 태그로 참조하여 사용하는 방법으로는 SPA(Single Page Application) 앱을 개발할 수 없기 때문에 대부분 Vue CLI 도구를 이용합니다.

Vue CLI를 이용해 개발하면 .vue 파일로 분리된 단일 파일 컴포넌트 단위로 컴포넌드 중심의 개발을 합니다. 개발된 컴포넌트를 조합하여 UI를 구성하지요. 개발된 코드는 webpack에 의해서 빌드되고 번들링된 후 배포버전의 html, css, js 파일을 떨궈 냅니다. 단 하나의 html 파일로 만들어내는거지요. 스크립트 태그로 참조하는 방식은 이게 불가능해요.

2019. 01. 11. 07:55
38