So konfigurieren und verwenden Sie die CDN-Beschleunigung in Vue

So konfigurieren und verwenden Sie die CDN-Beschleunigung in Vue

Mit der zunehmenden Entwicklung der Front-End-Entwicklung ist die Ladegeschwindigkeit von Webseiten zu einem der wichtigen Indikatoren für die Benutzererfahrung geworden. Das Aufkommen der CDN-Beschleunigungstechnologie (Content Delivery Network) bietet uns eine Lösung, um das Laden von Webseiten zu beschleunigen. In diesem Artikel wird erläutert, wie Sie die CDN-Beschleunigung in Vue konfigurieren und verwenden, und es werden spezifische Codebeispiele bereitgestellt.

1. Einführung in CDN
CDN ist ein verteiltes System, das Ressourcen über mehrere an verschiedenen geografischen Standorten verteilte Server an den Server verteilt, der dem Benutzer am nächsten liegt, wodurch Ladezeit und Verzögerung reduziert werden. Häufig verwendete Buckets der Vue-Familie (Vue.js, Vue Router und Vuex) verfügen bereits über offizielle CDN-beschleunigte Versionen. Diese CDN-Links können in das Projekt eingeführt werden, um das Laden von Ressourcen zu beschleunigen.

2. Konfigurieren Sie die CDN-Beschleunigung

1. Suchen Sie in der Datei index.html das Tag und fügen Sie den folgenden Code hinzu:

<!-- 引入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>

Dadurch werden Vue.js, Vue Router und Vuex kombiniert Die Bibliothek wurde in das Projekt eingeführt.

2. Fügen Sie in der Konfigurationsdatei vue.config.js des Vue-Projekts den folgenden Code hinzu:

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

Dadurch wird die CDN-Beschleunigung konfiguriert. Tatsächlich wird dem Webpack mitgeteilt, dass die importierten Bibliotheken bereits auf dem CDN vorhanden sind nicht benötigt. Dann packen Sie es in das Projekt.

3. Verwenden Sie CDN zur Beschleunigung

1. Verwenden Sie Vue Router und Vuex in der Komponente:

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. Erstellen Sie in der Eintragsdatei main.js eine Vue-Instanz und mounten Sie sie im 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");

Das wird Sie funktionieren normal mit Vue Router und Vuex und wurden durch CDN-Beschleunigung in das Projekt eingeführt.

Zusammenfassung
CDN-Beschleunigung ist eine Methode zur Optimierung der Ladegeschwindigkeit von Webseiten, wodurch Ladezeit und Latenz reduziert werden, indem Ressourcen auf Server verteilt werden, die den Benutzern am nächsten sind. Die Verwendung der CDN-Beschleunigung in Vue ist sehr einfach. Sie müssen lediglich CDN-Links in das Projekt einfügen und Webpack in der Konfigurationsdatei mitteilen, dass diese Bibliotheken bereits im CDN vorhanden sind. Dieser Artikel enthält spezifische Codebeispiele und hofft, für Vue-Entwickler hilfreich zu sein.

Das obige ist der detaillierte Inhalt vonSo konfigurieren und verwenden Sie die CDN-Beschleunigung in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!