Comment configurer et utiliser l'accélération CDN dans Vue

Comment configurer et utiliser l'accélération CDN dans Vue

Avec le développement croissant du développement front-end, la vitesse de chargement des pages Web est devenue l'un des indicateurs importants de l'expérience utilisateur. L’émergence de la technologie d’accélération CDN (Content Delivery Network) nous apporte une solution pour accélérer le chargement des pages Web. Cet article explique comment configurer et utiliser l'accélération CDN dans Vue et fournit des exemples de code spécifiques.

1. Introduction au CDN
CDN est un système distribué qui distribue les ressources au serveur le plus proche de l'utilisateur via plusieurs serveurs répartis dans différents emplacements géographiques, réduisant ainsi le temps et les délais de chargement. Les buckets de la famille Vue couramment utilisés (Vue.js, Vue Router et Vuex) ont déjà des versions officielles accélérées CDN. Ces liens CDN peuvent être introduits dans le projet pour accélérer le chargement des ressources.

2. Configurez l'accélération CDN

1. Dans le fichier index.html, recherchez la balise et ajoutez le code suivant :

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

Cela combinera Vue.js, Vue Router et Vuex. La bibliothèque a été introduite dans le projet.

2. Dans le fichier de configuration vue.config.js du projet Vue, ajoutez le code suivant :

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

Cela configurera l'accélération du CDN. En fait, cela indique à webpack que les bibliothèques importées sont déjà sur le CDN et le sont. pas nécessaire. Ensuite, emballez-le dans le projet.

3. Utilisez CDN pour accélérer

1. Utilisez Vue Router et Vuex dans le composant :

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. Dans le fichier d'entrée main.js, créez une instance Vue et montez-la sur le 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");

Cela permettra fonctionnent normalement En utilisant Vue Router et Vuex, ils ont été introduits dans le projet via l'accélération CDN.

Résumé
L'accélération CDN est une méthode d'optimisation de la vitesse de chargement des pages Web, réduisant le temps de chargement et la latence en distribuant les ressources aux serveurs les plus proches des utilisateurs. Utiliser l'accélération CDN dans Vue est très simple. Il vous suffit d'introduire des liens CDN dans le projet et d'indiquer à webpack dans le fichier de configuration que ces bibliothèques sont déjà sur CDN. Cet article fournit des exemples de code spécifiques, dans l'espoir d'être utile aux développeurs Vue.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!