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、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 サイトの他の関連記事を参照してください。