Vue에서 CDN 가속을 구성하고 사용하는 방법

Vue에서 CDN 가속을 구성하고 사용하는 방법

프런트 엔드 개발이 증가함에 따라 웹 페이지 로딩 속도는 사용자 경험의 중요한 지표 중 하나가 되었습니다. CDN(Content Delivery Network) 가속 기술의 출현은 웹 페이지 로딩 속도를 높이는 솔루션을 제공합니다. 이 기사에서는 Vue에서 CDN 가속을 구성 및 사용하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. CDN 소개
CDN은 서로 다른 지리적 위치에 분산된 여러 서버를 통해 사용자에게 가장 가까운 서버에 리소스를 분산시켜 로딩 시간과 지연을 줄이는 분산 시스템입니다. 일반적으로 사용되는 Vue 제품군 버킷(Vue.js, Vue Router 및 Vuex)에는 이미 공식 CDN 가속 버전이 있습니다. 이러한 CDN 링크를 프로젝트에 도입하여 리소스 로딩 속도를 높일 수 있습니다.

2. CDN 가속 구성

1. index.html 파일에서 태그를 찾아 다음 코드를 추가하세요.

<!-- 引入Vue.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 引入Vue Router CDN -->
<script src="https://cdn.jsdelivr.net/npm/vue-router"></script>
<!-- 引入Vuex CDN -->
<script src="https://cdn.jsdelivr.net/npm/vuex"></script>

이렇게 하면 Vue.js, Vue Router 및 Vuex가 결합됩니다. 라이브러리가 프로젝트에 도입되었습니다.

2. Vue 프로젝트의 vue.config.js 구성 파일에 다음 코드를 추가하세요.

module.exports = {
  // 配置CDN
  configureWebpack: {
    externals: {
      // vue: "Vue",
      // "vue-router": "VueRouter",
      // vuex: "Vuex"
      // 如果使用上面注释的代码，CDN引入的包将会挂载在全局变量Vue上
      // 如果不想挂载在Vue上，还可以通过以下方式引入
      vue: {
        commonjs: "vue",
        commonjs2: "vue",
        amd: "vue",
        root: "Vue"
      },
      "vue-router": {
        commonjs: "vue-router",
        commonjs2: "vue-router",
        amd: "vue-router",
        root: "VueRouter"
      },
      vuex: {
        commonjs: "vuex",
        commonjs2: "vuex",
        amd: "vuex",
        root: "Vuex"
      }
    }
  }
};

이렇게 하면 CDN 가속이 구성됩니다. 실제로 가져온 라이브러리가 이미 CDN에 있고 있음을 webpack에 알려줍니다. 필요하지 않습니다. 그런 다음 프로젝트에 패키지하십시오.

3. CDN을 사용하여 가속화

1. 구성 요소에서 Vue Router 및 Vuex 사용:

import Vue from "vue";
import VueRouter from "vue-router";
import Vuex from "vuex";

Vue.use(VueRouter);
Vue.use(Vuex);

const router = new VueRouter({
  routes: [...]
});

const store = new Vuex.Store({
  // ...
});

2. main.js 항목 파일에서 Vue 인스턴스를 생성하고 이를 DOM에 마운트합니다.

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

이렇게 하면 됩니다. 정상적으로 작동합니다. Vue Router 및 Vuex를 사용하여 CDN 가속을 통해 프로젝트에 도입되었습니다.

요약
CDN 가속은 사용자에게 가장 가까운 서버에 리소스를 분산시켜 웹 페이지 로딩 속도를 최적화하고 로딩 시간과 지연 시간을 줄이는 방법입니다. Vue에서 CDN 가속을 사용하는 것은 매우 간단합니다. 프로젝트에 CDN 링크를 도입하고 구성 파일에 이러한 라이브러리가 이미 CDN에 있다는 것을 webpack에 알리기만 하면 됩니다. 이 문서에서는 Vue 개발자에게 도움이 되기를 바라며 특정 코드 예제를 제공합니다.

위 내용은 Vue에서 CDN 가속을 구성하고 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!