Rumah hujung hadapan web View.js Cara menggunakan penghalaan Lazy-Loading Vue Router dan kesannya terhadap peningkatan prestasi halaman

Cara menggunakan penghalaan Lazy-Loading Vue Router dan kesannya terhadap peningkatan prestasi halaman

Sep 15, 2023 pm 02:10 PM
vue router Peningkatan prestasi lazy-loading

Vue Router Lazy-Loading路由的使用方法以及它对页面性能的改进效果

Cara menggunakan Vue Router Lazy-Loading routing dan kesannya terhadap peningkatan prestasi halaman

Apabila aplikasi bahagian hadapan menjadi semakin kompleks, pengurusan penghalaan bahagian hadapan menjadi semakin penting. Sebagai rangka kerja bahagian hadapan arus perdana, Penghala Vue terbina dalam Vue.js menyediakan fungsi pengurusan penghalaan yang sangat berkuasa, yang boleh membantu kami membina aplikasi satu halaman yang fleksibel dan cekap. Antaranya, Vue Router Lazy-Loading ialah fungsi yang sangat penting dan praktikal Ia boleh memuatkan komponen penghalaan atas permintaan, dengan itu meningkatkan prestasi halaman dan pengalaman pengguna.

Dalam pembangunan sebelum ini, kami biasanya memuatkan semua komponen penghalaan serentak apabila aplikasi bermula. Walaupun kaedah ini mudah dan mudah untuk pembangunan, apabila aplikasi menjadi kompleks dan terdapat banyak komponen penghalaan, ia akan menyebabkan masa pemuatan semasa pemulaan menjadi terlalu lama, sekali gus mengurangkan kelajuan pemuatan halaman. Untuk menyelesaikan masalah ini, Vue Router memperkenalkan konsep Lazy-Loading, yang memuatkan komponen penghalaan yang diperlukan atas permintaan.

Menggunakan Lazy-Loading Vue Router adalah sangat mudah Anda hanya perlu menentukan sifat komponen sebagai fungsi apabila menentukan laluan dan fungsi mengembalikan pernyataan import. Berikut ialah contoh kod: import语句即可。下面是一个示例代码:

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

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

export default router
Salin selepas log masuk

在上面的示例中,我们定义了两个路由,一个是Home,一个是About。与以往不同的是,这次我们不再通过直接指定组件的方式来定义路由的component属性,而是使用一个函数,并且在函数体内使用import语句来异步加载路由组件。

在页面中使用Lazy-Loading之后,我们可以明显地感受到页面性能上的改进。当用户访问某个路由时,该路由对应的组件将会被动态加载,而不是在应用初始化时一次性加载所有路由。这样做的好处是,可以减少首次加载所需要的时间,并且降低网络请求的数量,从而提升页面的加载速度。

另外,Lazy-Loading还可以结合Webpack的Code Splitting功能,将路由组件打包成独立的文件,从而进一步提升页面的加载速度。Webpack会根据我们定义的路由结构,自动将路由组件打包成不同的文件,这样每个页面实际需要加载的资源就会更少,从而提高了页面的并行加载能力。

在使用Vue Router Lazy-Loading时,我们还可以进行一些更高级的配置。例如,我们可以通过webpackChunkName来指定每个路由组件打包后的文件名,这样有助于我们更好地区分和管理路由组件。下面是一个示例代码:

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "home" */ '@/views/Home')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '@/views/About')
  }
]
Salin selepas log masuk

在上面的示例中,我们使用了webpackChunkNamerrreee

Dalam contoh di atas, kami menentukan dua laluan, satu ialah Home dan satu lagi ialah About. Perbezaan dari masa lalu ialah kali ini kami tidak lagi mentakrifkan atribut component laluan dengan menyatakan komponen secara langsung, sebaliknya, kami menggunakan fungsi dan menggunakan import dalam badan fungsi untuk memuatkan komponen penghalaan secara tidak segerak.

Selepas menggunakan Lazy-Loading dalam halaman, kami jelas dapat merasakan peningkatan dalam prestasi halaman. Apabila pengguna mengakses laluan, komponen yang sepadan dengan laluan akan dimuatkan secara dinamik dan bukannya memuatkan semua laluan sekaligus apabila aplikasi dimulakan. Kelebihan ini ialah ia boleh mengurangkan masa yang diperlukan untuk memuatkan pertama dan mengurangkan bilangan permintaan rangkaian, sekali gus meningkatkan kelajuan pemuatan halaman. 🎜🎜Selain itu, Lazy-Loading juga boleh digabungkan dengan fungsi Pemisahan Kod Webpack untuk membungkus komponen penghalaan ke dalam fail bebas, dengan itu meningkatkan lagi kelajuan pemuatan halaman. Webpack akan secara automatik membungkus komponen penghalaan ke dalam fail berbeza berdasarkan struktur penghalaan yang kami tentukan, supaya setiap halaman sebenarnya perlu memuatkan lebih sedikit sumber, dengan itu meningkatkan keupayaan pemuatan selari halaman. 🎜🎜Apabila menggunakan Vue Router Lazy-Loading, kami juga boleh melakukan beberapa konfigurasi yang lebih maju. Sebagai contoh, kami boleh menentukan nama fail berpakej bagi setiap komponen penghalaan melalui webpackChunkName, yang akan membantu kami membezakan dan mengurus komponen penghalaan dengan lebih baik. Berikut ialah contoh kod: 🎜rrreee🎜Dalam contoh di atas, kami menggunakan ulasan webpackChunkName untuk menentukan nama fail yang dibungkus, supaya dalam fail yang dibungkus, respons yang sepadan akan dijana berdasarkan pada nama fail komen. Dengan cara ini, kita boleh dengan lebih mudah membezakan dan memanggil setiap komponen penghalaan semasa pembangunan dan penyahpepijatan. 🎜🎜Secara umumnya, Vue Router Lazy-Loading ialah ciri yang sangat praktikal yang boleh membantu kami mengoptimumkan prestasi halaman dan pengalaman pengguna. Dengan memuatkan komponen penghalaan atas permintaan, kami boleh mengurangkan masa yang diperlukan untuk pemuatan pertama dan meningkatkan keupayaan pemuatan selari halaman. Pada masa yang sama, kami juga boleh menggabungkan fungsi Pemisahan Kod Webpack untuk meningkatkan lagi kelajuan pemuatan halaman. Dalam pembangunan sebenar, kita harus menggunakan sepenuhnya ciri ini untuk memberikan pengguna pengalaman memuatkan halaman yang lebih baik. 🎜

Atas ialah kandungan terperinci Cara menggunakan penghalaan Lazy-Loading Vue Router dan kesannya terhadap peningkatan prestasi halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk memilih mod penghalaan dalam Penghala Vue? Bagaimana untuk memilih mod penghalaan dalam Penghala Vue? Jul 21, 2023 am 11:43 AM

VueRouter ialah pengurus penghalaan yang disediakan secara rasmi oleh Vue.js. Ia boleh membantu kami melaksanakan fungsi navigasi halaman dan penghalaan dalam aplikasi Vue. Apabila menggunakan VueRouter, kita boleh memilih mod penghalaan yang berbeza mengikut keperluan sebenar. VueRouter menyediakan tiga mod penghalaan, iaitu mod cincang, mod sejarah dan mod abstrak. Berikut akan memperkenalkan secara terperinci ciri-ciri ketiga-tiga mod penghalaan ini dan cara memilih mod penghalaan yang sesuai. Mod hash (lalai

Bagaimana untuk menggunakan laluan bernama dalam Penghala Vue? Bagaimana untuk menggunakan laluan bernama dalam Penghala Vue? Jul 23, 2023 pm 05:49 PM

Bagaimana untuk menggunakan laluan bernama dalam VueRouter? Dalam Vue.js, VueRouter ialah pengurus penghalaan yang disediakan secara rasmi yang boleh digunakan untuk membina aplikasi satu halaman. VueRouter membolehkan pembangun mentakrifkan laluan dan memetakannya kepada komponen tertentu untuk mengawal lompatan dan navigasi antara halaman. Penghalaan bernama adalah salah satu ciri yang sangat berguna Ia membolehkan kami menentukan nama dalam definisi penghalaan, dan kemudian melompat ke laluan yang sepadan melalui nama itu, menjadikan lompatan penghalaan lebih mudah.

Cara menggunakan Penghala Vue untuk lompat penghalaan dalam uniapp Cara menggunakan Penghala Vue untuk lompat penghalaan dalam uniapp Oct 18, 2023 am 08:52 AM

Cara menggunakan VueRouter untuk penghalaan lompatan dalam uniapp Menggunakan VueRouter untuk penghalaan lompatan dalam uniapp ialah operasi yang sangat biasa Artikel ini akan memperkenalkan secara terperinci cara menggunakan VueRouter dalam projek uniapp dan memberikan contoh kod khusus. 1. Pasang VueRouter Sebelum menggunakan VueRouter, kita perlu memasangnya terlebih dahulu. Buka baris arahan, masukkan direktori akar projek uniapp, dan kemudian laksanakan arahan berikut untuk memasang

Bagaimana untuk menggunakan Penghala Vue untuk mencapai kesan peralihan apabila menukar laluan? Bagaimana untuk menggunakan Penghala Vue untuk mencapai kesan peralihan apabila menukar laluan? Jul 21, 2023 pm 06:55 PM

Bagaimana untuk menggunakan VueRouter untuk mencapai kesan peralihan apabila menukar penghalaan? Pengenalan: VueRouter ialah perpustakaan pengurusan penghalaan yang disyorkan secara rasmi oleh Vue.js untuk membina SPA (SinglePageApplication Ia boleh mencapai pertukaran antara halaman dengan mengurus surat-menyurat antara laluan URL dan komponen). Dalam pembangunan sebenar, untuk meningkatkan pengalaman pengguna atau memenuhi keperluan reka bentuk, kami sering menggunakan kesan peralihan untuk menambah dinamik dan keindahan pada penukaran halaman. Artikel ini akan memperkenalkan cara menggunakan

Bagaimanakah penghalaan bersarang dilaksanakan dalam Penghala Vue? Bagaimanakah penghalaan bersarang dilaksanakan dalam Penghala Vue? Jul 22, 2023 am 10:31 AM

Bagaimanakah penghalaan bersarang dilaksanakan dalam VueRouter? Vue.js ialah rangka kerja JavaScript yang popular untuk membina antara muka pengguna. VueRouter ialah pemalam rasmi untuk Vue.js, digunakan untuk membina sistem penghalaan untuk aplikasi satu halaman. VueRouter menyediakan cara yang mudah dan fleksibel untuk mengurus navigasi antara halaman dan komponen aplikasi anda yang berbeza. Penghalaan bersarang ialah ciri yang sangat berguna dalam VueRouter, yang boleh mengendalikan struktur halaman yang kompleks dengan mudah.

Apakah peningkatan prestasi dan kelebihan PHP8? Apakah peningkatan prestasi dan kelebihan PHP8? Jan 13, 2024 pm 12:24 PM

Apakah peningkatan prestasi dan kelebihan yang dibawa oleh PHP8? Sejak penubuhannya pada tahun 1995, PHP telah menjadi salah satu bahasa skrip sebelah pelayan yang paling popular. PHP8 ialah versi terbaharu PHP, yang akan dikeluarkan secara rasmi mulai penghujung tahun 2020. PHP8 membawa banyak ciri dan penambahbaikan baharu yang menarik, terutamanya dari segi prestasi. Artikel ini akan memperkenalkan beberapa peningkatan prestasi utama dan kelebihan PHP8 dan memberikan contoh kod khusus. Pengkompil JIT PHP8 memperkenalkan pengkompil JIT (Just-In-Time), iaitu a

Gabungan fungsi ubah hala Vue Router dan pengawal laluan Gabungan fungsi ubah hala Vue Router dan pengawal laluan Sep 15, 2023 pm 12:48 PM

VueRouter ialah pengurus penghalaan rasmi untuk Vue.js. Ia membolehkan kami membina aplikasi halaman tunggal (SPA) dengan mentakrifkan laluan, mencipta laluan bersarang dan menambah pengawal laluan. Dalam VueRouter, gabungan fungsi ubah hala dan pengawal laluan boleh mencapai kawalan penghalaan dan navigasi pengguna yang lebih fleksibel. Fungsi ubah hala membolehkan kami mengubah hala pengguna ke laluan tertentu yang lain apabila mereka mengakses satu laluan tertentu. Ini berguna apabila mengendalikan ralat input pengguna atau menyatukan lompatan penghalaan. Sebagai contoh, apabila

Petua pengoptimuman prestasi untuk fungsi ubah hala Vue Router Petua pengoptimuman prestasi untuk fungsi ubah hala Vue Router Sep 15, 2023 am 08:33 AM

Petua pengoptimuman prestasi untuk fungsi ubah hala VueRouter Pengenalan: VueRouter ialah pengurus penghalaan rasmi Vue.js Ia membolehkan pembangun membina aplikasi satu halaman dan memaparkan komponen yang berbeza mengikut URL yang berbeza. VueRouter juga menyediakan fungsi ubah hala, yang boleh mengubah hala halaman ke URL yang ditentukan mengikut peraturan tertentu. Mengoptimumkan prestasi fungsi ubah hala adalah pertimbangan penting apabila menggunakan VueRouter untuk pengurusan laluan. Artikel ini akan memperkenalkan

See all articles