Bagaimana untuk menggunakan penghalaan Lazy-Loading Vue Router dengan betul untuk meningkatkan prestasi halaman?

Bagaimana cara menggunakan penghalaan Lazy-Loading Vue Router untuk meningkatkan prestasi halaman dengan betul?

Dalam pembangunan bahagian hadapan, prestasi halaman adalah pertimbangan yang sangat penting. Menggunakan Vue.js sebagai rangka kerja bahagian hadapan, apabila berurusan dengan aplikasi berskala besar, penghalaan yang munasabah dan strategi pemuatan malas boleh meningkatkan kelajuan pemuatan halaman dan pengalaman pengguna dengan ketara.

Vue Router ialah pengurus penghalaan rasmi Vue.js Ia boleh memadankan komponen yang berbeza mengikut URL yang berbeza dan menjadikannya pada halaman. Penghala Vue menyediakan kaedah pemuatan malas (Lazy-Loading), yang boleh memuatkan kod halaman secara dinamik apabila diperlukan dan bukannya memuatkan semua komponen penghalaan sekaligus. Kaedah ini boleh mengurangkan jumlah kod yang dimuatkan untuk kali pertama dan meningkatkan kelajuan pemuatan.

Di bawah ini kami akan menggunakan contoh mudah untuk memperkenalkan cara menggunakan fungsi pemuatan malas Penghala Vue dengan betul.

Pertama sekali, kita perlu memasang Vue Router, yang boleh dipasang melalui arahan npm:

npm install vue-router

Setelah pemasangan selesai, perkenalkan Vue Router dan komponen yang berkaitan dalam fail kemasukan utama: # 🎜🎜#

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

Seterusnya, kita boleh mentakrifkan konfigurasi penghalaan:

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('./views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('./views/About.vue')
  },
  // ...
];

Dalam contoh ini, setiap objek konfigurasi penghalaan mengandungi tiga atribut: laluan, nama dan komponen. Antaranya, laluan mewakili laluan laluan, nama mewakili nama laluan, dan komponen mewakili komponen yang sepadan. Ambil perhatian bahawa apabila menggunakan pemuatan malas, kami menggunakan fungsi anak panah dan fungsi import() untuk mengimport komponen secara dinamik.

Kemudian, kita boleh mencipta tika Vue Router dan lulus konfigurasi sebagai parameter:

const router = new VueRouter({
  routes
});

Akhir sekali, pasangkan Vue Router ke dalam contoh Vue: #🎜🎜 #

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

Pada ketika ini, kami telah melengkapkan tetapan asas Penghala Vue. Kini, apabila laluan diakses, komponen yang sepadan akan dimuatkan secara dinamik, sekali gus mengurangkan jumlah kod yang diperlukan untuk beban pertama.

Pada masa yang sama, kami juga boleh menggabungkan fungsi pemisahan kod Webpack untuk memisahkan setiap komponen kepada fail bebas, yang akan membantu penyemak imbas memuatkan berbilang komponen secara selari. Berikut ialah contoh konfigurasi Webpack:

module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

Konfigurasi di atas akan memisahkan kod komponen yang dimuatkan secara dinamik dan menjana fail bebas.

Dengan menggunakan fungsi pemuatan malas Penghala Vue dengan betul, prestasi halaman boleh dipertingkatkan dengan ketara. Lazy loading membahagikan kod kepada berbilang fail, yang bukan sahaja mengurangkan jumlah kod yang dimuatkan buat kali pertama, tetapi juga memanfaatkan keupayaan pemuatan selari penyemak imbas, dengan itu mempercepatkan kelajuan memuatkan halaman dan masa tindak balas.

Dalam pembangunan aplikasi sebenar, kami boleh membahagikan berbilang halaman kepada berbilang modul mengikut keperluan perniagaan dan melakukan pemuatan malas atas permintaan, dengan itu meningkatkan lagi prestasi halaman.

Untuk meringkaskan, penggunaan munasabah fungsi pemuatan malas Vue Router boleh meningkatkan prestasi halaman dengan berkesan. Kami boleh melaksanakan pemuatan malas dengan memasang Penghala Vue, menentukan konfigurasi penghalaan, mencipta tika Vue Router dan menggabungkan fungsi pemisahan kod Webpack. Pemuatan malas boleh membantu mengurangkan jumlah kod yang dimuatkan buat kali pertama, mempercepatkan kelajuan pemuatan halaman dan masa tindak balas serta meningkatkan pengalaman pengguna. Adalah disyorkan untuk menggunakan strategi pemuatan malas secara aktif apabila membangunkan aplikasi besar untuk meningkatkan prestasi halaman.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan penghalaan Lazy-Loading Vue Router dengan betul untuk meningkatkan prestasi halaman?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!