Rumah  >  Artikel  >  hujung hadapan web  >  3 cara untuk melaksanakan pemuatan atas permintaan laluan (pemuatan malas laluan) dalam Vue

3 cara untuk melaksanakan pemuatan atas permintaan laluan (pemuatan malas laluan) dalam Vue

藏色散人
藏色散人ke hadapan
2022-08-10 10:22:051727semak imbas

Mengapa kita memerlukan pemuatan malas?

Untuk aplikasi satu halaman seperti vue, jika tiada aplikasi lazy loading, fail yang dibungkus dengan webpack akan menjadi luar biasa besar, mengakibatkan kandungan yang perlu dimuatkan apabila memasuki halaman utama. Terlalu banyak dan terlalu panjang akan menyebabkan skrin putih yang panjang Walaupun pemuatan dilakukan, ia tidak kondusif untuk pengalaman pengguna Menggunakan pemuatan malas boleh membahagikan halaman dan memuatkan halaman apabila diperlukan, yang boleh berkongsi dengan berkesan beban halaman utama. Tanggung tekanan pemuatan dan kurangkan masa pemuatan halaman utama [Cadangan berkaitan: tutorial video vue.js]

  • komponen asynchronous vue

  • penghala vue mengkonfigurasi penghalaan dan menggunakan teknologi komponen tak segerak vue untuk mencapai pemuatan atas permintaan

    Walau bagaimanapun, dalam kes ini, komponen menjana fail js

  • /* vue teknologi komponen tak segerak*/
  • { laluan: '/home', nama: 'home',

    komponen: resolve =>
  • ([' @/komponen/rumah'],selesaikan)
},

{ laluan: '/index', nama: 'Indeks', komponen: selesaikan => '@/components/index '],resolve) },

{ path: '/about', name: 'about', component: resolve => ,selesaikan) }


Pemuatan tidak malas:

Pemuatan malas

2. Penyelesaian pemuatan malas komponen 2. Laluan pemuatan malas (menggunakan import)

3 -router mengkonfigurasi penghalaan dan menggunakan keperluan webpack.pastikan teknologi juga boleh melaksanakan pemuatan atas permintaan.

Dalam kes ini, berbilang laluan yang menyatakan chunkName yang sama akan digabungkan dan dibungkus ke dalam satu fail js.

Atas ialah kandungan terperinci 3 cara untuk melaksanakan pemuatan atas permintaan laluan (pemuatan malas laluan) dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Artikel ini dikembalikan pada:csdn.net. Jika ada pelanggaran, sila hubungi admin@php.cn Padam