Perkara yang perlu dilakukan jika penukaran halaman vue lambat

Apabila menggunakan Vue untuk membangunkan aplikasi halaman tunggal (SPA), kelajuan penukaran halaman adalah salah satu faktor utama dalam pengalaman pengguna. Jika penukaran halaman terlalu perlahan, pengguna tidak akan dapat menggunakan aplikasi dengan lancar, sekali gus menjejaskan kebolehgunaan aplikasi dan kepuasan pengguna. Jadi, jika kami menghadapi penukaran halaman Vue yang perlahan, kami boleh mengambil langkah berikut untuk mengoptimumkannya.

1. Muatkan komponen penghalaan atas permintaan

Dalam Vue, vue-router biasanya digunakan untuk melaksanakan navigasi laluan antara halaman. Apabila aplikasi dimulakan, vue-router akan memuatkan semua komponen penghalaan ke dalam memori sekaligus secara lalai. Jika aplikasi mempunyai terlalu banyak komponen penghalaan atau beberapa komponen adalah sangat besar, ia akan menyebabkan masa memuatkan halaman menjadi terlalu lama, sekali gus menjejaskan kelajuan penukaran halaman.

Untuk menyelesaikan masalah ini, kita boleh menggunakan kaedah pemuatan atas permintaan (Lazy Loading), iaitu apabila pengguna mengakses laluan, komponen yang sepadan dengan laluan dimuatkan ke dalam memori. Ini boleh dicapai melalui komponen tak segerak Vue.

Contohnya, dalam konfigurasi penghalaan vue-router, kita boleh menukar takrifan komponen kepada fungsi tak segerak, yang mengembalikan objek Promise Apabila Promise diselesaikan, komponen tak segerak akan dimuatkan dan diberikan. :

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: () => import('./Home.vue')
    },
    // ...
  ]
})

2. Alih keluar gaya CSS global yang tidak diperlukan

Apabila halaman dimuatkan, penyemak imbas perlu menggunakan gaya CSS pada semua elemen, yang mungkin berlaku semasa proses ini Penyekatan render. Jika beberapa gaya CSS global tidak diperlukan, kami boleh mempertimbangkan untuk mengalih keluar atau memperkemasnya.

Perlu diambil perhatian bahawa pemadaman gaya CSS global boleh menjejaskan prestasi halaman, jadi ia perlu dilakukan dengan berhati-hati. Jika anda tidak pasti gaya yang tidak diperlukan, anda boleh menggunakan alat Analisis Prestasi dalam Alat Pembangun Chrome untuk melihat garis masa pemaparan dan mengenal pasti gaya CSS yang menyebabkan penyekatan.

3. Optimumkan sumber imej

Sumber imej ialah sebahagian besar jenis fail dalam aplikasi web Saiz dan kelajuan pemuatannya akan menjejaskan prestasi halaman secara langsung. Kami boleh mengoptimumkan sumber imej dengan cara berikut:

• Memampatkan imej: Gunakan alat pemampatan imej profesional untuk memampatkan imej kepada saiz yang sesuai dan mengurangkan masa pemuatan.
• Gunakan CDN imej: Menggunakan CDN imej (Rangkaian Penghantaran Kandungan) boleh meningkatkan kelajuan pemuatan imej dan mengurangkan beban pelayan.
• Gunakan format imej: Untuk jenis imej yang berbeza, anda boleh memilih format imej yang paling sesuai. Sebagai contoh, format PNG sesuai untuk situasi di mana imej mempunyai ketelusan dan kualiti imej perlu dijamin format JPEG sesuai untuk imej besar seperti foto.

4. Gunakan keep-alive untuk cache halaman

Dalam Vue, gunakan komponen keep-alive untuk cache contoh komponen yang dimuatkan untuk menghalang setiap akses Re-render halaman, dengan itu meningkatkan kelajuan pemuatan halaman. Komponen keep-alive boleh menetapkan medan sertakan dan tidak termasuk untuk menentukan komponen mana yang perlu dicache atau dikecualikan daripada cache.

<keep-alive :include="['Home', 'Profile']">
  <router-view />
</keep-alive>

Perlu diambil perhatian bahawa apabila menggunakan komponen keep-alive untuk cache halaman, ia mungkin mempunyai beberapa kesan sampingan, seperti menduduki lebih banyak memori dan menyebabkan beberapa keadaan tidak konsisten. Oleh itu, penggunaan memerlukan pertimbangan yang teliti dan ujian yang teliti.

5. Kurangkan overhed larian

Dalam Vue, setiap komponen mempunyai kitaran hayat dan kitaran hayat yang berbeza sepadan dengan operasi yang berbeza. Jika logik perniagaan dalam komponen terlalu kompleks dan data perlu dikira semula dan dihuraikan setiap kali ia dipaparkan, ia akan memberi kesan yang besar pada prestasi halaman.

Untuk mengurangkan overhed berjalan semasa memaparkan halaman, kita boleh mengambil kaedah berikut:

• Kurangkan jumlah pengiraan: letakkan beberapa tugasan dengan jumlah pengiraan yang agak besar dalam dicipta atau Dikira semasa kitaran hayat yang dipasang untuk mengelakkan pengiraan berulang semasa pemaparan.
• Elakkan pemaparan yang tidak perlu: Apabila komponen dikemas kini, tentukan sama ada untuk memaparkan semula komponen dengan membandingkan perbezaan antara data lama dan baharu.
• Gunakan Vuex dengan sewajarnya: Menggunakan Vuex untuk mengurus keadaan aplikasi boleh mengurangkan kos komunikasi data antara komponen dan mengelakkan penyampaian semula yang tidak perlu.

6. Strategi pengoptimuman lain

Selain kaedah di atas, anda juga boleh mencuba strategi pengoptimuman berikut:

• Gunakan Webpack atau alat binaan lain Optimumkan saiz dan kelajuan pakej.
• Gunakan cache penyemak imbas: Tambahkan mekanisme cache yang sesuai dan kawal masa cache dalam aplikasi untuk mengelakkan permintaan berulang untuk sumber statik.
• Gunakan pemaparan bahagian pelayan (SSR): SSR boleh melengkapkan pemaparan awal pada bahagian pelayan, meningkatkan kelajuan pemuatan halaman dan SEO.
• Berhati-hati dengan kebocoran memori: Dalam aplikasi Vue, beberapa langganan acara, pemasa, dll. perlu dibersihkan secara manual apabila komponen dimusnahkan.

Ringkasan

Penukaran halaman adalah penting untuk prestasi dan pengalaman pengguna aplikasi Vue Jika penukaran halaman lambat, ia akan mempengaruhi pengalaman pengguna. Apabila membangunkan aplikasi Vue, anda perlu memberi perhatian kepada perkara berikut:

• Muatkan komponen penghalaan atas permintaan
• Padamkan gaya CSS global yang tidak perlu
• Optimumkan imej sumber;
• Gunakan keep-alive untuk cache halaman;
• Melalui strategi pengoptimuman di atas, kami boleh meningkatkan kelajuan penukaran halaman Vue dengan berkesan, meningkatkan kepuasan pengguna dan kebolehgunaan aplikasi.

Atas ialah kandungan terperinci Perkara yang perlu dilakukan jika penukaran halaman vue lambat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!