프로덕션 배포 | Vue.js

개발(Development) vs 프로덕션(Production)

→ 개발하는 동안 Vue는 개발 경험을 개선하기 위해 여러 기능을 제공한다.

• 일반적인 에러 및 위험에 대한 경고
• props/이벤트 유효성 검사
• 반응성 디버깅 훅
• Devtools 통합

→ 하지만 이러한 기능은 프로덕션에서 필요없다.

• 약간의 성능 오버헤드를 유발할 수 있다.

빌드 툴 없이

→ CDN 또는 자체 호스팅 스크립트에서 로드하여 빌드 도구 없이 Vue를 사용하는 경우, 프로덕션에 배포할 때 프로덕션 빌드(.prod.js 로 끝나는 dist 파일)를 사용해야 한다.

• 프로덕션 빌드는 모든 개발 전용 코드 분기가 제거된 상태로 미리 최소화된다.
  • 전역 빌드를 사용하는 경우(Vue 전역을 통해 접근): vue.global.prod.js 를 사용한다.
  • ESM 빌드를 사용하는 경우(네이티브 ESM 가져오기를 통해 접근): vue-esm-browser.prod.js 를 사용한다.

빌드 툴 사용