Bagaimana untuk menggunakan Penghala Vue untuk melaksanakan pemuatan malas dan pramuat laluan?

Bagaimana untuk menggunakan Penghala Vue untuk melaksanakan pemuatan malas dan pramuat laluan?

Vue Router ialah pengurus penghalaan rasmi Vue.js. Ia boleh membantu kami melaksanakan fungsi penghalaan bahagian hadapan, yang sangat penting untuk aplikasi satu halaman (SPA). Dalam projek sebenar, apabila halaman bertambah dan fungsi menjadi lebih kaya, pemuatan malas dan pramuat laluan adalah kaedah pengoptimuman yang biasa digunakan. Artikel ini akan memperkenalkan cara menggunakan Penghala Vue untuk mencapai kedua-dua fungsi ini.

1. Lazy Loading of Routing
Dalam keadaan biasa, kami perlu membungkus semua komponen halaman ke dalam fail JavaScript, supaya keseluruhan kod aplikasi akan dimuat turun semasa memuatkan buat kali pertama. Tetapi apabila aplikasi menjadi semakin kompleks, saiz fail JavaScript ini akan menjadi lebih besar dan lebih besar, menyebabkan masa muat pertama menjadi terlalu lama. Untuk menyelesaikan masalah ini, anda boleh menggunakan pemuatan malas laluan.

1. Buat laluan pemuatan malas
   Apabila menggunakan Penghala Vue untuk mencipta laluan, kita boleh menggunakan ciri komponen tak segerak Vue untuk melaksanakan pemuatan malas. Sebagai contoh, kami mempunyai komponen halaman bernama "Home". Anda boleh mentakrifkan penghalaan pemuatan malas seperti berikut:

const Home = () => import('./views/Home.vue')

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }
  ]
})

2. Mengkonfigurasi pek web
   Apabila menggunakan penghalaan pemuatan malas, anda perlu menggunakan fungsi pemisahan kod pek web untuk memisahkan komponen tak segerak yang Dibungkus ke dalam sebuah fail. Dalam fail konfigurasi, konfigurasi berikut diperlukan:

module.exports = {
  // ...
  output: {
    // ...
    chunkFilename: 'js/[name].[chunkhash].js'
  },
  // ...
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      cacheGroups: {
        vendors: {
          test: /[\/]node_modules[\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
}

Selepas konfigurasi ini, webpack akan secara automatik membungkus komponen tak segerak ke dalam fail berasingan dan menambah nilai cincang yang sesuai sebagai nama fail untuk mencapai pemuatan tak segerak.

2. Pramuat penghalaan (Pramuat)
Dalam pemuatan penghalaan yang malas, komponen halaman hanya akan dimuatkan apabila diakses, dan setiap halaman hanya akan dimuatkan sekali. Walau bagaimanapun, dalam sesetengah senario, kami mungkin perlu memuatkan kod beberapa komponen halaman semasa pemulaan aplikasi untuk meningkatkan kelajuan tindak balas semasa lawatan berikutnya. Ini memerlukan penggunaan fungsi pramuat penghalaan.

1. Konfigurasikan webpack
   Pertama, dalam fail konfigurasi webpack, anda perlu menggunakan komen ajaib untuk menentukan komponen yang akan dimuatkan. Contohnya: magic comment来指定要预加载的组件。例如：

const Home = () => import(/* webpackPreload: true */ './views/Home.vue')

2. 配置路由
   在创建路由时，可以使用webpackChunkName

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import(/* webpackChunkName: "home" */ './views/Home.vue')
    },
    // ...
  ]
})

Salin selepas log masuk

Konfigurasikan penghalaan

Apabila membuat laluan, anda boleh menggunakan pilihan webpackChunkName untuk menamakan komponen halaman pramuat untuk memudahkan pembezaan. Contohnya:


rrreee

Dengan cara ini, apabila aplikasi dimulakan, Penghala Vue akan secara automatik pramuat komponen Laman Utama dan memuatkan kod komponen halaman terlebih dahulu.
Ringkasan

Dengan menggunakan fungsi pemuatan malas dan pramuat Vue Router, kami boleh mengoptimumkan prestasi aplikasi bahagian hadapan dengan berkesan.

🎜Dalam projek sebenar, bergantung pada bilangan dan kerumitan komponen halaman, anda boleh memilih pemuatan malas atau pramuat secara fleksibel untuk meningkatkan kelajuan pemuatan dan pengalaman pengguna aplikasi. 🎜🎜Saya harap artikel ini dapat membantu anda memahami cara menggunakan Penghala Vue untuk melaksanakan pemuatan malas dan pramuat laluan. Saya doakan anda semua berjaya dalam pelajaran! 🎜

Atas ialah kandungan terperinci Bagaimana untuk menggunakan Penghala Vue untuk melaksanakan pemuatan malas dan pramuat laluan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!