Vue Router Lazy-Loading routing: trend untuk membantu meningkatkan prestasi halaman

Vue Router ialah pengurus laluan rasmi dalam rangka kerja Vue.js. Ia membolehkan pembangun menukar kandungan halaman melalui pemetaan laluan, menjadikan aplikasi satu halaman lebih terkawal dan lebih mudah untuk diselenggara. Walau bagaimanapun, apabila aplikasi menjadi lebih kompleks, pemuatan dan penghuraian laluan boleh menjadi kesesakan prestasi. Untuk menyelesaikan masalah ini, Vue Router menyediakan fungsi pemuatan malas laluan, yang menangguhkan pemuatan laluan sehingga benar-benar diperlukan.

Lazy-loading ialah teknik pemuatan yang melambatkan pemuatan sumber sehingga ia benar-benar diperlukan. Untuk aplikasi satu halaman yang besar, pemuatan malas boleh meningkatkan kelajuan dan prestasi pemuatan halaman. Dengan membahagikan ketulan kod yang lebih besar kepada ketulan yang lebih kecil dan memuatkannya atas permintaan apabila diperlukan, anda boleh mengelak daripada memuatkan keseluruhan aplikasi sekali gus. Di sini, kita akan belajar tentang penghalaan pemuatan malas dalam Penghala Vue dan memberikan beberapa contoh kod khusus.

Lazy loading routing dalam Vue Router boleh dilaksanakan melalui fungsi import dinamik. Import dinamik ialah ciri ES6, yang membolehkan kami mengimport modul berbeza mengikut keperluan semasa pelaksanaan kod. Dalam Penghala Vue, kita boleh menentukan komponen yang sepadan dengan setiap laluan sebagai fungsi, yang mengembalikan Promise import(). Apabila Janji ini dihuraikan, komponen yang sepadan akan dimuatkan secara dinamik.

Mari kita gunakan contoh mudah untuk menggambarkan penggunaan penghalaan pemuatan malas. Katakan kita mempunyai halaman yang dipanggil Laman Utama dan halaman yang dipanggil Perihal. Kami boleh mentakrifkannya sebagai laluan pemuatan malas seperti berikut:

const Home = () => import('./components/Home.vue');
const About = () => import('./components/About.vue');

Dalam kod di atas, Laman Utama dan Perihal ialah kedua-dua fungsi, dan ia menggunakan fungsi import() untuk memuatkan komponen yang sepadan secara dinamik. Ambil perhatian bahawa laluan komponen adalah relatif kepada modul semasa. Kini, kami boleh mengkonfigurasi laluan pemuatan malas ini ke dalam Penghala Vue:

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

Dalam kod di atas, kami mengkonfigurasi Laman Utama dan Perihal kepada laluan akar '/' dan '/about' masing-masing. Apabila pengguna mengakses laluan ini, komponen yang sepadan akan dimuatkan dan dipaparkan secara dinamik.

Selain asas lazy loading routing, Vue Router juga menyediakan kaedah lazy loading yang lebih maju iaitu komponen tak segerak. Komponen tak segerak ialah komponen khas yang tidak dipaparkan serta-merta apabila ia mula-mula dimuatkan Sebaliknya, ia memuatkan dan menjadikan komponen itu apabila ia diperlukan.

Mari kita ambil contoh untuk menggambarkan penggunaan komponen tak segerak. Katakan kita mempunyai halaman yang dipanggil Post yang datanya perlu diperolehi daripada pelayan melalui AJAX. Kami boleh mentakrifkan Pos sebagai komponen tak segerak dan memuatkan serta menjadikannya apabila diperlukan.

const Post = () => ({
  component: import('./components/Post.vue'),
  loading: LoadingComponent,
  error: ErrorComponent,
  delay: 200,
  timeout: 3000
});

Dalam kod di atas, Pos ialah fungsi yang mengembalikan objek konfigurasi yang mengandungi konfigurasi yang diperlukan untuk pemuatan dinamik dan pemaparan komponen. Antaranya, atribut komponen mewakili komponen yang akan dimuatkan, atribut pemuatan mewakili komponen pemegang tempat yang dipaparkan sebelum komponen dimuatkan, atribut ralat mewakili komponen yang dipaparkan apabila pemuatan gagal, atribut kelewatan mewakili masa pemuatan tertunda (milisaat), dan atribut tamat masa mewakili masa tamat masa pemuatan (milisaat).

Apabila mengkonfigurasi Pos ke Penghala Vue, kami boleh menggunakannya secara langsung sebagai komponen tak segerak:

const router = new VueRouter({
  routes: [
    {
      path: '/post/:id',
      component: Post
    }
  ]
});

Dalam kod di atas, kami mengkonfigurasi Post ke laluan '/post/:id' dengan parameter. Apabila pengguna mengakses laluan, komponen Post akan dimuatkan secara dinamik dan diberikan.

Ringkasnya, pemuatan laluan Vue Router yang malas boleh menangguhkan pemuatan laluan sehingga benar-benar diperlukan. Dengan membahagikan blok kod yang lebih besar kepada ketulan yang lebih kecil dan memuatkannya atas permintaan apabila diperlukan, anda boleh meningkatkan prestasi dan kelajuan pemuatan halaman anda dengan sangat baik. Dalam artikel ini, kami mempelajari tentang penggunaan asas penghalaan malas dalam Penghala Vue dan memberikan beberapa contoh kod konkrit. Saya harap artikel ini dapat membantu anda memahami dan menggunakan penghalaan pemuatan malas!

Atas ialah kandungan terperinci Vue Router Lazy-Loading routing: trend untuk membantu meningkatkan prestasi halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!