5 cara yang sangat sederhana untuk mempercepat aplikasi VueJS Anda secara signifikan

Halo Terjemahan artikel ini disiapkan khusus untuk siswa kursus Pengembang JavaScript , yang dimulai minggu depan.


Suara Chui

Sedikit tentang saya - nama saya Vaibhav, saya dari Five2One. Saya telah terlibat dalam VueJS selama 2 tahun penuh (sejak rilis 1.0) dan pada dasarnya membantu menciptakan / melatih 3 basis kode VueJS terbesar di Sydney. Kode ini melayani jutaan orang, jadi tugas saya bukan hanya untuk membuat pola kode yang dapat diukur, tetapi juga untuk menjaga kinerjanya sampai batas tertentu.

Anda melihat, sebagai suatu peraturan, startup kecil dan basis kode berorientasi pada mendorong kode dengan cepat dan mengirimkan produk ke klien, yang telah kami berhasil - Anda dapat mengevaluasi pekerjaan kami di situs web Five2one.com.au, tetapi selain itu, insinyur, tujuan kami adalah untuk memperhatikan kinerja dan skalabilitas.

Mari kita langsung ke pokok permasalahan - bicarakan beberapa cara sederhana untuk meningkatkan kinerja aplikasi VueJS Anda.

Nomor satu

Apa yang kita lihat di sini adalah template "fungsional" yang tidak memiliki status menyatakan dan hanya berurusan dengan alat peraga. Itu dapat dengan mudah dibuat dalam komponen fungsional berdasarkan Vue menggunakan metode rendering.

https://vuejs.org/v2/guide/render-function.html

Jika Anda membaca ini, Anda akan melihat alat peraga lewat dengan functional: true
Jadi, perbaikan sederhana untuk solusi ini adalah di bawah ini:



Sederhananya, Anda tidak perlu khawatir mengubah sintaks templat, Anda dapat tetap menggunakannya sambil menikmati kemewahan sintaks Vue.

REFERENSI CEPAT: Karena ini adalah komponen fungsional, konteksnya tidak ada, oleh karena itu, untuk mengakses alat peraga, Anda harus menggunakan props.name - terima kasih kepada Dinesh Madhanlal untuk menyebutkan

Cara mudah kedua

Menggunakan keep-hidup untuk komponen yang dimuat secara dinamis.



Terkadang kita memuat komponen dengan cepat menggunakan Vue. Kita dapat beralih antar komponen yang memuat secara dinamis. Agar kami dapat mempertahankan status dan mencegah reload data saat berpindah komponen, shell DOMless adalah solusi yang baik untuk mempercepat proses

Cara mudah ketiga

Ini akan menjadi sedikit lebih jelas bagi kebanyakan orang ketika Anda mempertimbangkan bagaimana sistem vDOM bekerja di Vue. Tujuan vDOM adalah untuk bertindak sebagai sarana perantara untuk memperbarui dan melacak (sangat efisien) perubahan terisolasi dalam antarmuka pengguna proyek dan menjalankan rendering ulang terisolasi untuk komponen target ini alih-alih menggambar ulang seluruh layar.



Seringkali kita dapat membuat komponen yang memiliki shell yang dirender beberapa kali, dan beberapa bagian lain dari template yang sama perlu melakukan banyak pekerjaan setiap kali bagian lain dari template digambar ulang. Solusi sederhana adalah dengan hanya membagi file menjadi komponen-komponen. Jika anak tidak bergantung pada orang tua untuk data, ia harus diproses tanpa masalah.

Cara mudah keempat

Menggunakan fungsi anonim dalam acara CTA. Setiap kali fungsi anonim diteruskan ke tombol "onClick" (Saya melihat pola ini di antara pengembang yang berasal dari React, karena ini adalah salah satu cara dalam Bereaksi untuk meneruskan data pengguna ke suatu fungsi), lebih baik untuk tidak melewatkan fungsi anonim. Alasannya adalah ini.

Perhatikan contoh di bawah ini:



Apa yang terjadi di sini adalah bahwa setiap kali panjang div bertambah (seperti bilah kemajuan), semua tombol juga akan digambar ulang.

Secara teknis, mereka tidak boleh, karena tidak ada yang berubah di dalamnya, kan? Tidak ada pembaruan alat peraga atau pembaruan data, dll.

Ini adalah trik, JS berinteraksi dengan fungsi anonim dalam memori, yaitu, setiap kali rendering ulang terjadi, instance baru fungsi anonim dibuat, dan algoritme perbandingan memilihnya sebagai objek baru, oleh karena itu, menampilkan kembali tombol meskipun tidak diperlukan.

Untungnya, Vue sangat luar biasa sehingga cukup pintar untuk memahami bahwa tidak ada fungsi yang dipanggil sendiri yang harus dipanggil sampai peristiwa yang dilekatkan dengan api, jadi meskipun itu IIF, Vue membuatnya terpukul. yang menunda eksekusi.



Jika Anda ingin aman, selalu layak membuat penutupan yang mengembalikan fungsi lain, sehingga fungsi pembungkus hanya memiliki satu instance dan tidak menyebabkan rendering ulang.

Magic 5 cara mudah

Yang ini sesederhana itu, ada area abu-abu mengenai hal itu, dan ini bukan solusi umum. Gunakan metode ini hanya ketika ada banyak komponen pada halaman dan mengganti tampilan komponen dengan cepat.

Ya, saya berbicara tentang menggunakan v-if atau v-show. Ada perbedaan besar di antara keduanya. V-if = false tidak pernah membuat komponen dengan direktif dinonaktifkan. Oleh karena itu, jika komponen ini berganti beberapa kali dalam waktu singkat, ini akan memengaruhi kinerja, jadi menggunakan v-show dalam situasi seperti itu akan bekerja dengan sangat baik.

Namun, tangkapannya adalah bahwa dalam situasi di mana Anda menambahkan v-show ke sebuah komponen, dan komponen ini harus melakukan operasi yang berat ketika pertama kali diberikan, maka operasi ini akan dilakukan terlepas dari apakah v-show itu benar atau salah. Anda harus menundanya menggunakan v-jika sampai komponen ini benar-benar diperlukan. Ingat bahwa v-show hanya menetapkan nilai tampilan CSS untuk komponen yang ditampilkan: tidak ada jika komponen itu masih "dirender".

Namun, bahkan jika komponen ini memiliki beban kerja awal yang besar, jika terus-menerus berganti, dan metode ini harus dijalankan setiap waktu, lebih baik untuk melakukan v-show. Itu semua bermuara pada kebutuhan pengguna.

Saya harap ini membantu Anda semua!

Jika Anda menyukai ini, pastikan untuk berlangganan topik serupa:
twitter: twitter.com/ @veebuv

Ini terjemahannya. Menunggu komentar Anda, teman.