Pengalaman praktikal penghalaan Vue Router Lazy-Loading, membolehkan prestasi halaman mencapai kemuncaknya

Pengalaman praktikal penghalaan Vue Router Lazy-Loading untuk mencapai kemuncak prestasi halaman, memerlukan contoh kod khusus

1. Pengenalan

Apabila aplikasi satu halaman menjadi semakin popular, prestasi telah menjadi isu utama. Dalam projek besar, selalunya terdapat banyak halaman penghalaan yang kompleks, dan memuatkan semua komponen yang berkaitan sekali gus akan memberi kesan negatif pada kelajuan beban awal dan prestasi keseluruhan. Untuk menyelesaikan masalah ini, Penghala Vue menyediakan fungsi penghalaan Lazy-Loading, membolehkan kami memuatkan komponen atas permintaan. Artikel ini akan memperkenalkan beberapa pengalaman praktikal tentang penghalaan Lazy-Loading Vue Router dan menyediakan beberapa contoh kod khusus untuk membantu pembangun mencapai prestasi optimum dalam projek mereka.

2. Prinsip pemuatan malas

Pemuatan malas (juga dipanggil pemuatan atas permintaan) ialah teknologi pengoptimuman prestasi halaman yang meningkatkan kelajuan pemuatan awal dan mengurangkan penggunaan sumber dengan memuatkan fail secara dinamik apabila diperlukan. Pemuatan malas dalam Penghala Vue dilaksanakan melalui komponen tak segerak dan fungsi pemisahan kod Webpack. Apabila mengakses laluan yang memerlukan pemuatan malas, Penghala Vue akan menghantar permintaan tak segerak untuk memuatkan komponen yang berkaitan.

3. Pengalaman praktikal

1. Pisah komponen dengan penghalaan

Sebelum mula mengamalkan pemuatan malas, kita perlu membahagi komponen terlebih dahulu mengikut butiran penghalaan. Untuk projek besar, halaman mungkin selalunya mengandungi berbilang komponen, dan kami perlu membahagikan komponen ini kepada modul yang lebih kecil untuk dimuatkan atas permintaan. Dengan cara ini, apabila pengguna mengakses laluan tertentu, hanya komponen yang berkaitan dengan laluan itu dimuatkan dan bukannya semua komponen untuk keseluruhan halaman.

2. Konfigurasikan penghalaan

Dalam Penghala Vue, komponen pemuatan malas perlu dilaksanakan melalui fungsi pemisahan kod Webpack. Kita perlu menukar komponen dalam konfigurasi penghalaan kepada fungsi yang mengembalikan Promise dan menggunakan fungsi import Webpack untuk memuatkan komponen secara dinamik. Berikut ialah contoh konfigurasi penghalaan:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

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

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

export default router

Dalam kod di atas, komponen Laman Utama dan Perihal ditakrifkan sebagai fungsi yang mengembalikan Janji. Komponen ini akan dimuatkan secara dinamik apabila mengakses laluan yang sepadan.

3. Memuatkan komponen atas permintaan

Untuk memuatkan komponen atas permintaan, kita perlu menggunakan komponen tak segerak Vue dalam templat. Komponen tak segerak membolehkan kami menentukan fungsi kilang yang boleh mengembalikan Promise dan mengembalikan tika komponen apabila Promise diselesaikan. Berikut ialah contoh menggunakan komponen tak segerak:

<template>
  <div>
    <AsyncComponent />
  </div>
</template>

<script>
export default {
  components: {
    AsyncComponent: () => import('@/components/AsyncComponent.vue')
  }
}
</script>

Dalam kod di atas, komponen AsyncComponent dimuatkan secara tak segerak melalui fungsi import. Apabila komponen ini dipaparkan ke halaman, ia akan dimuatkan secara dinamik.

4. Ringkasan

Melalui Vue Router Lazy-Loading routing, kami boleh memuatkan komponen atas permintaan, dengan itu meningkatkan prestasi halaman. Dalam amalan, kita perlu membahagikan komponen mengikut butiran penghalaan dan mengkonfigurasi penghalaan yang sepadan. Pada masa yang sama, kita juga perlu menggunakan komponen tak segerak untuk memuatkan komponen atas permintaan. Melalui pengalaman praktikal di atas, pembangun boleh mencapai prestasi optimum dalam projek mereka. Saya harap contoh kod dalam artikel ini dapat membantu pembaca lebih memahami dan menggunakan fungsi penghalaan Lazy-Loading bagi Penghala Vue.

Atas ialah kandungan terperinci Pengalaman praktikal penghalaan Vue Router Lazy-Loading, membolehkan prestasi halaman mencapai kemuncaknya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!