Vue で CDN アクセラレーションを構成して使用する方法

Vue で CDN アクセラレーションを構成して使用する方法

フロントエンド開発の増加に伴い、Web ページの読み込み速度が重要な指標の 1 つになっています。ユーザーエクスペリエンスの。 CDN (Content Delivery Network) 高速化テクノロジの出現により、Web ページの読み込みを高速化するソリューションが提供されます。この記事では、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 の 3 つのライブラリがプロジェクトに導入されます。

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"
      }
    }
  }
};

これにより、実際に webpack に指示する CDN アクセラレーションが構成されます。これらのインポートされたライブラリはすでに CDN 上にあるため、プロジェクトにパッケージ化する必要はありません。

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");

このようにして、CDN アクセラレーションを通じてプロジェクトに導入された Vue Router と Vuex を通常どおりに使用できます。

概要
CDN アクセラレーションは、ユーザーに最も近いサーバーにリソースを分散し、読み込み時間と遅延を短縮することで Web ページの読み込み速度を最適化する方法です。 Vue で CDN アクセラレーションを使用するのは非常に簡単で、プロジェクトに CDN リンクを導入し、これらのライブラリが既に CDN 上にあることを設定ファイル内の webpack に伝えるだけです。この記事では、Vue 開発者の役に立つことを願って、具体的なコード例を示します。

以上がVue で CDN アクセラレーションを構成して使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。