Membuat Profil dengan Tab Performa Vue DevTools

Sebelum melakukan optimasi, Anda harus mengetahui ke mana waktu digunakan. Vue DevTools menyediakan tampilan kinerja/linimasa yang merekam perenderan komponen, sehingga Anda dapat menemukan pekerjaan yang sia-sia tanpa menebak-nebak.

Instal ekstensi peramban atau jalankan aplikasi mandiri. Dalam proyek Vite, pengaya vite-plugin-vue-devtools menambahkan pemeriksa di dalam aplikasi.

Buka tab linimasa/kinerja DevTools dan tekan rekam, lalu berinteraksilah dengan aplikasi Anda. Hentikan perekaman untuk menangkap aktivitas perenderan selama rentang waktu tersebut.

Setiap perenderan komponen muncul sebagai peristiwa di linimasa. Anda dapat melihat kapan komponen dirender ulang dan berapa lama proses perenderannya berlangsung.

Satu penerapan adalah satu kali pengiriman pembaruan ke DOM. Grafik penerapan menampilkan setiap penerapan dan komponen yang dirender di dalamnya, sehingga Anda dapat menemukan penerapan yang menyentuh jauh lebih banyak komponen daripada yang diperkirakan.

Diagram api menumpuk durasi perenderan induk dan anak. Bilah yang lebar menunjukkan perenderan yang lambat, sedangkan tumpukan yang dalam menunjukkan bagaimana perenderan merambat melalui pohon.

Perenderan sia-sia adalah perenderan komponen yang terjadi, tetapi menghasilkan keluaran yang sama. Perenderan ini muncul sebagai peristiwa perenderan berulang yang hasilnya tidak mengubah DOM.

Penyebab umumnya adalah meneruskan objek yang baru dibuat atau fungsi panah sebaris sebagai properti pada setiap renderisasi, sehingga memoisasi rusak. Komponen anak dirender ulang meskipun keluaran yang terlihat sama persis.

Naikkan konstanta ke cakupan yang lebih tinggi atau bungkus data turunan dalam computed agar referensi yang sama diteruskan pada setiap renderisasi.

Linimasa juga merekam peristiwa tetikus dan papan ketik. Sejajarkan pembaruan yang lambat dengan interaksi yang memicunya untuk menemukan jalur kode persis yang perlu dioptimalkan.

Pemeriksa komponen dapat menyoroti komponen saat diperbarui. Mengamati penghitung yang berkedip pada setiap perubahan status yang tidak berkaitan akan segera menunjukkan renderisasi berlebihan.

Apa yang direpresentasikan oleh grafik commit pada tab kinerja?

Gunakan tab kinerja/linimasa Vue DevTools untuk merekam renderisasi. Grafik commit menampilkan setiap pembaruan DOM beserta komponen yang dirender, sedangkan diagram nyala menunjukkan renderisasi yang lambat. Carilah renderisasi yang sia-sia—komponen yang dirender ulang tanpa mengubah keluaran, biasanya karena referensi properti yang tidak stabil—lalu perbaiki dengan konstanta yang dinaikkan cakupannya atau computed.