Bagaimana untuk mengkonfigurasi dan menggunakan pecutan CDN dalam Vue

Cara mengkonfigurasi dan menggunakan pecutan CDN dalam Vue

Dengan perkembangan pembangunan bahagian hadapan yang semakin meningkat, kelajuan memuatkan halaman web telah menjadi salah satu penunjuk penting pengalaman pengguna. Kemunculan teknologi pecutan CDN (Content Delivery Network) memberikan kami penyelesaian untuk mempercepatkan pemuatan halaman web. Artikel ini akan memperkenalkan cara mengkonfigurasi dan menggunakan pecutan CDN dalam Vue, dan memberikan contoh kod khusus.

1. Pengenalan kepada CDN
CDN ialah sistem teragih yang mengagihkan sumber kepada pelayan yang paling hampir dengan pengguna melalui berbilang pelayan yang diedarkan di lokasi geografi yang berbeza, mengurangkan masa pemuatan dan kelewatan. Baldi keluarga Vue yang biasa digunakan (Vue.js, Vue Router dan Vuex) sudah mempunyai versi dipercepatkan CDN rasmi Pautan CDN ini boleh diperkenalkan ke dalam projek untuk mempercepatkan pemuatan sumber.

2. Konfigurasikan pecutan CDN

1. Dalam fail index.html, cari teg dan tambahkan kod berikut:

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

Ini akan menggabungkan Vue.js, Vue Perpustakaan telah diperkenalkan ke dalam projek ini.

2. Dalam fail konfigurasi vue.config.js projek Vue, tambahkan kod berikut:

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

Ini akan mengkonfigurasi pecutan CDN Malah, ia memberitahu pek web bahawa perpustakaan yang diimport sudah berada di CDN dan berada tidak diperlukan. Kemudian bungkusnya ke dalam projek.

3. Gunakan CDN untuk mempercepatkan

1. Gunakan Penghala Vue dan Vuex dalam komponen:

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. Dalam fail masukan main.js, buat contoh Vue dan lekapkannya pada DOM:
This will

berfungsi seperti biasa Menggunakan Penghala Vue dan Vuex, mereka telah diperkenalkan ke dalam projek melalui pecutan CDN.

Ringkasan

Pecutan CDN ialah kaedah mengoptimumkan kelajuan pemuatan halaman web, mengurangkan masa pemuatan dan kependaman dengan mengagihkan sumber kepada pelayan yang paling hampir dengan pengguna. Menggunakan pecutan CDN dalam Vue adalah sangat mudah Anda hanya perlu memperkenalkan pautan CDN ke dalam projek dan memberitahu webpack dalam fail konfigurasi bahawa perpustakaan ini sudah pun berada di CDN. Artikel ini menyediakan contoh kod khusus, dengan harapan dapat membantu pembangun Vue.

Atas ialah kandungan terperinci Bagaimana untuk mengkonfigurasi dan menggunakan pecutan CDN dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!