Apakah maksud pemuatan malas penghalaan vue?

Vue routing lazy loading bermaksud memuatkan kod komponen penghalaan hanya apabila ia perlu digunakan, untuk mengurangkan masa pemuatan awal dan meningkatkan prestasi aplikasi. Prinsip pelaksanaan adalah untuk memuatkan kod komponen penghalaan secara dinamik apabila komponen itu perlu digunakan. Khususnya, apabila pengguna menavigasi ke laluan, Penghala Vue akan menyemak sama ada komponen laluan telah dimuatkan. Jika tidak, ia akan menggunakan fungsi import dinamik Webpack untuk memuatkan kod komponen secara tidak segerak. Apabila menggunakan pemuatan malas, anda mesti memastikan bahawa nama komponen tak segerak adalah unik.

Sistem pengendalian untuk tutorial ini: sistem Windows 10, komputer DELL G3.

Vue Router lazy loading (Vue Router lazy loading) merujuk kepada memuatkan kod komponen penghalaan hanya apabila komponen perlu digunakan, untuk mengurangkan masa pemuatan awal dan meningkatkan prestasi aplikasi. Dalam aplikasi Vue.js, jika konfigurasi penghalaan dan komponen disertakan dalam fail pembungkusan aplikasi, ia akan menyebabkan masa muat awal meningkat, terutamanya apabila aplikasi mempunyai banyak laluan dan komponen. Untuk menyelesaikan masalah ini, Vue.js menyediakan mekanisme pemuatan malas penghalaan.

Prinsip pelaksanaan pemuatan malas penghalaan Vue adalah untuk memuatkan kod komponen penghalaan secara dinamik apabila komponen itu perlu digunakan. Khususnya, apabila pengguna menavigasi ke laluan, Penghala Vue akan menyemak sama ada komponen laluan telah dimuatkan. Jika tidak, ia akan menggunakan fungsi import dinamik Webpack untuk memuatkan kod komponen secara tidak segerak. Dengan cara ini, kod komponen yang sepadan hanya dimuatkan apabila pengguna benar-benar perlu mengakses laluan, mengurangkan masa muat awal.

Untuk melaksanakan pemuatan malas penghalaan Vue, anda perlu menggunakan fungsi komponen tak segerak Penghala Vue. Komponen tak segerak ialah fungsi kilang yang mengembalikan objek Promise yang sepatutnya menyelesaikan komponen. Dalam Penghala Vue, komponen tak segerak boleh ditentukan dengan menggunakan atribut komponen dalam konfigurasi laluan. Contohnya:

const routes = [{path: '/user',component: () => import(/* webpackChunkName: "user" */ './UserComponent.vue')}]

Dalam contoh ini, Penghala Vue secara tidak segerak memuatkan komponen UserComponent.vue apabila pengguna menavigasi ke laluan /user. Webpack akan membungkus komponen ke dalam ketulan kod bebas (ketulan), dan menggunakan webpackChunkName dalam ulasan untuk menentukan nama ketulan kod. Dengan cara ini, apabila komponen perlu dimuatkan, Webpack boleh mencari dan memuatkan blok kod yang sepadan dengan cepat.

Selain menggunakan fungsi import dinamik Webpack untuk melaksanakan pemuatan malas laluan, anda juga boleh menggunakan fungsi pengawal navigasi Vue Router untuk mencapainya. Pengawal navigasi ialah segmen kod yang dilaksanakan sebelum dan selepas navigasi dicetuskan Komponen boleh dimuatkan secara dinamik dalam pengawal navigasi mengikut keperluan. Contohnya:

router.beforeEach((to, from, next) => {const isIE = navigator.userAgent.indexOf('MSIE') !== -1;if (isIE) {// 如果使用ie浏览器，则不进行懒加载  next(false);} else {// 否则进行懒加载  next();}})

Dalam contoh ini, Vue Router sebelumSetiap fungsi pengawal navigasi digunakan. Fungsi ini dilaksanakan sebelum navigasi dicetuskan, dan komponen boleh dimuatkan secara dinamik mengikut keperluan. Sebagai contoh, di sini ditentukan sama ada pengguna menggunakan pelayar IE Jika ya, pemuatan malas tidak akan dilakukan jika tidak, pemuatan malas akan dilakukan. Perlu diingat bahawa apabila menggunakan pengawal navigasi, fungsi seterusnya mesti digunakan untuk menamatkan fungsi panggil balik. Jika fungsi seterusnya tidak dipanggil, navigasi akan dibatalkan.

Ringkasnya, pemuatan malas penghalaan Vue ialah teknik pengoptimuman prestasi yang sangat berguna, yang boleh mengurangkan masa pemuatan awal aplikasi kepada minimum dan meningkatkan prestasi dan kelajuan tindak balas aplikasi. Apabila melaksanakan pemuatan malas laluan Vue, anda boleh menggunakan fungsi import dinamik Webpack atau fungsi pengawal navigasi Penghala Vue. Perlu diingatkan bahawa apabila menggunakan pemuatan malas, anda mesti memastikan bahawa nama komponen tak segerak adalah unik untuk mengelakkan masalah.

Atas ialah kandungan terperinci Apakah maksud pemuatan malas penghalaan vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!