Rumah > Artikel > hujung hadapan web > Bagaimana untuk menggunakan Penghala Vue untuk melaksanakan pemuatan malas dan pramuat laluan?
Bagaimana untuk menggunakan Penghala Vue untuk melaksanakan pemuatan malas dan pramuat laluan?
Vue Router ialah pengurus penghalaan rasmi Vue.js. Ia boleh membantu kami melaksanakan fungsi penghalaan bahagian hadapan, yang sangat penting untuk aplikasi satu halaman (SPA). Dalam projek sebenar, apabila halaman bertambah dan fungsi menjadi lebih kaya, pemuatan malas dan pramuat laluan adalah kaedah pengoptimuman yang biasa digunakan. Artikel ini akan memperkenalkan cara menggunakan Penghala Vue untuk mencapai kedua-dua fungsi ini.
1. Lazy Loading of Routing
Dalam keadaan biasa, kami perlu membungkus semua komponen halaman ke dalam fail JavaScript, supaya keseluruhan kod aplikasi akan dimuat turun semasa memuatkan buat kali pertama. Tetapi apabila aplikasi menjadi semakin kompleks, saiz fail JavaScript ini akan menjadi lebih besar dan lebih besar, menyebabkan masa muat pertama menjadi terlalu lama. Untuk menyelesaikan masalah ini, anda boleh menggunakan pemuatan malas laluan.
const Home = () => import('./views/Home.vue') const router = new VueRouter({ routes: [ { path: '/', name: 'Home', component: Home } ] })
module.exports = { // ... output: { // ... chunkFilename: 'js/[name].[chunkhash].js' }, // ... optimization: { splitChunks: { chunks: 'async', minSize: 30000, maxSize: 0, minChunks: 1, maxAsyncRequests: 5, maxInitialRequests: 3, automaticNameDelimiter: '~', cacheGroups: { vendors: { test: /[\/]node_modules[\/]/, priority: -10 }, default: { minChunks: 2, priority: -20, reuseExistingChunk: true } } } } }
Selepas konfigurasi ini, webpack akan secara automatik membungkus komponen tak segerak ke dalam fail berasingan dan menambah nilai cincang yang sesuai sebagai nama fail untuk mencapai pemuatan tak segerak.
2. Pramuat penghalaan (Pramuat)
Dalam pemuatan penghalaan yang malas, komponen halaman hanya akan dimuatkan apabila diakses, dan setiap halaman hanya akan dimuatkan sekali. Walau bagaimanapun, dalam sesetengah senario, kami mungkin perlu memuatkan kod beberapa komponen halaman semasa pemulaan aplikasi untuk meningkatkan kelajuan tindak balas semasa lawatan berikutnya. Ini memerlukan penggunaan fungsi pramuat penghalaan.
komen ajaib
untuk menentukan komponen yang akan dimuatkan. Contohnya: magic comment
来指定要预加载的组件。例如:const Home = () => import(/* webpackPreload: true */ './views/Home.vue')
webpackChunkName
const router = new VueRouter({ routes: [ { path: '/', name: 'Home', component: () => import(/* webpackChunkName: "home" */ './views/Home.vue') }, // ... ] })
Konfigurasikan penghalaan
Apabila membuat laluan, anda boleh menggunakan pilihanwebpackChunkName
untuk menamakan komponen halaman pramuat untuk memudahkan pembezaan. Contohnya:
rrreee
Dengan menggunakan fungsi pemuatan malas dan pramuat Vue Router, kami boleh mengoptimumkan prestasi aplikasi bahagian hadapan dengan berkesan.
🎜Dalam projek sebenar, bergantung pada bilangan dan kerumitan komponen halaman, anda boleh memilih pemuatan malas atau pramuat secara fleksibel untuk meningkatkan kelajuan pemuatan dan pengalaman pengguna aplikasi. 🎜🎜Saya harap artikel ini dapat membantu anda memahami cara menggunakan Penghala Vue untuk melaksanakan pemuatan malas dan pramuat laluan. Saya doakan anda semua berjaya dalam pelajaran! 🎜Atas ialah kandungan terperinci Bagaimana untuk menggunakan Penghala Vue untuk melaksanakan pemuatan malas dan pramuat laluan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!