Vue.js의 개발용 버전과 배포용 버전을 알아봅니다. Vue.js 라이브러리 파일을 포함할 때 사용하는 CDN에 대해 알아봅니다.
1. Vue.js 개발용 버전
개발용 버전은 주로 개발 및 디버깅 목적으로 사용됩니다.
코드가 더 가독성 있으며, 디버깅 및 개발 도구의 사용을 지원합니다.
개발용 버전에는 더 많은 경고 메시지와 디버깅 정보가 포함되어 있어 개발자가 문제를 파악하기 쉽습니다.
Vue 개발 도구와 관련된 기능을 지원하며, 런타임 컴파일러가 포함됩니다.
2. Vue.js 배포용 버전
배포용 버전은 실제 사용자에게 제공되는 프로덕션 환경에서 사용됩니다.
코드는 최적화되어 있으며, 디버깅 정보와 불필요한 경고 메시지가 제거됩니다.
파일 크기가 작아져 로딩 속도를 향상시키며, 성능을 최적화합니다.
Vue 개발 도구와 런타임 컴파일러가 제거되므로 파일 크기가 줄어듭니다.
개발용 버전은 개발자가 코드를 작성하고 디버깅할 때 사용하며, 개발 중에 런타임 오류를 식별하는 데 도움을 줍니다. 또한 개발 도구와 더 많은 정보를 제공하여 개발 과정을 편리하게 만듭니다.
반면에 배포용 버전은 애플리케이션을 최종 사용자에게 제공하기 위해 사용됩니다. 이 버전은 코드를 최적화하여 불필요한 정보를 제거하여 애플리케이션의 성능을 향상시킵니다. 또한 파일 크기가 작아져 로딩 속도를 개선하고, 더 효율적으로 동작합니다.
일반적으로 개발 중에는 개발용 버전을 사용하고, 애플리케이션을 배포할 때는 배포용 버전을 사용하여 최상의 사용자 경험과 성능을 제공합니다. Vue.js를 빌드하고 번들링할 때, 이 두 버전을 구분하여 사용하도록 주의해야 합니다.
3. CDN ( Content Delivery Network )
웹 페이지에 Vue.js 라이브러리 파일을 포함할 때는 CDN 사용을 권합니다. Vue.js를 Content Delivery Network (CDN)을 통해 로드하는 방법은 Vue.js를 웹 페이지에 빠르게 추가하는 간단한 방법 중 하나입니다. 이것은 개발 및 프로토타이핑 단골이고 초기 프로젝트 설정을 최소화할 때 유용합니다. Vue.js의 CDN 버전은 Vue.js 라이브러리와 필요한 의존성을 웹 페이지에 포함하는 URL을 제공합니다. Vue.js 배포용 버전은 난독화와 압축이 되었다는 의미로 파일 이름이 vue.min.js 입니다. 개발용 버전은 파일 이름이 vue.js 입니다.
Vue.js 를 배포하는 대표적인 CDN은 다음과 같습니다.
- 개발용버전 : https://unpkg.com/vue@<버전>/dist/vue.js
- 배포용버전 : https://unpkg.com/vue@<버전>/dist/vue.min.js
UNPKG
UNPKGunpkg is a fast, global content delivery network for everything on npm. Use it to quickly and easily load any file from any package using a URL like:unpkg.com/:package@:version/:file Examples Using a fixed version: You may also use a semver range or a
unpkg.com
jsDelivr - A free, fast, and reliable CDN for JS and Open Source
Optimized for JS and ESM delivery from npm and GitHub. Works with all web formats. Serving more than 150 billion requests per month.
www.jsdelivr.com
cdnjs - The #1 free and open source CDN built to make life easier for developers
Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make it faster and easier to load library fil
cdnjs.com
4. CDN 예제
아래는 Vue.js를 CDN을 통해 로드하는 단계입니다.
Vue.js 라이브러리를 로드하는 스크립트 태그를 HTML 파일의 <head> 또는 <body> 부분에 추가합니다. 주로 다음과 같은 URL을 사용합니다.
| <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> |
이 URL에서 "2.6.14"는 사용하려는 Vue.js 버전을 나타내며, 필요에 따라 업데이트할 수 있습니다.
Vue.js를 로드한 후에는 Vue 인스턴스를 생성하고 애플리케이션을 개발할 수 있습니다. Vue.js는 전역 Vue 객체인 Vue를 제공하므로 이를 사용하여 Vue 애플리케이션을 작성할 수 있습니다.
예를 들어
| <div id="app"> {{ message }} </div> <script> new Vue({ el: '#app', data: { message: 'Hello, Vue.js!' } }) </script> |
필요한 경우 Vue.js 의존성도 CDN을 통해 로드할 수 있습니다. 예를 들어 Vue Router 또는 Vuex와 같은 Vue.js의 부가 라이브러리를 사용하려면 해당 라이브러리의 CDN URL을 추가하면 됩니다.
CDN을 통해 Vue.js를 로드하는 방법은 초기 개발과 프로토타이핑 단계에서 편리합니다. 그러나 프로덕션 환경에서는 보안 및 성능 이슈를 고려하여 자체 서버에서 라이브러리를 호스팅하거나 빌드 도구를 사용하여 번들링하는 것이 더 좋을 수 있습니다.
'vue.js' 카테고리의 다른 글
| Vue.js 라이프사이클 (0) | 2023.10.31 |
|---|---|
| Vue.js 에서 필요한 용어 (0) | 2023.10.30 |
| Vue.js 빌드 도구 (1) | 2023.10.30 |
| Vue.js 개발 환경 (0) | 2023.10.29 |
| Vue.js 소개 (0) | 2023.10.29 |
