Gutenberg: Blok galeri lambat

Ikhtisar Masalah

Blok Galeri seperti yang saat ini diterapkan memiliki masalah kinerja dan penskalaan karena jumlah permintaan yang dihasilkannya. Saya tidak terbiasa dengan praktik terbaik di React, tetapi saya akan mencoba menjelaskan apa yang saya lihat saat bekerja dengan galeri.

Langkah-langkah untuk Mereproduksi (untuk bug)

1. Masukkan blok Galeri baru

2. Klik tombol "Sisipkan dari Perpustakaan Media" untuk membuka modal media
   
   Ini adalah perilaku standar, tetapi hanya untuk menjelaskan apa yang terjadi: Ketika modal media dibuka untuk pertama kalinya, ia mengirimkan permintaan AJAX query-attachments untuk mengambil 40 lampiran terbaru dan menambahkannya ke koleksi global yang dapat diakses di wp.media.model.Attachments.all .Menggulir perpustakaan akan malas memuat 40 lampiran sekaligus.

3. Pilih 10 gambar dan klik tombol "Buat Galeri Baru"

4. Klik tombol "Sisipkan Galeri"
   
   __Saat memasukkan galeri, blok Galeri menjalankan permintaan terpisah ke REST API untuk setiap gambar di galeri. Dalam hal ini, itulah 10 permintaan yang harus ditanggapi sebelum galeri dapat dipratinjau.
   
   Selain membanting server dengan permintaan, ini juga menciptakan penundaan rendering yang tidak optimal.__

5. Klik tombol edit di bilah alat untuk memperbarui galeri
   
   __Blok mengirimkan permintaan AJAX get-attachment untuk setiap gambar di galeri. Ini terjadi setiap kali bingkai media dibuka.__

6. Tutup bingkai media

7. Simpan postingan

8. Menyegarkan
   
   __Saat editor dimuat, gambar diambil satu per satu dari REST API.__

Perilaku yang Diharapkan

Saya berharap galeri merender lebih cepat. Di mesin lokal saya, galeri dengan 10 gambar dapat dirender dari 4-10 detik.

Kemungkinan Solusi

Idealnya, jika sebuah postingan memiliki galeri, data gambar akan dimuat sebelumnya untuk mencegah permintaan tambahan apa pun selama pemuatan awal.

Saat membuka bingkai media, PR #2488 akan membantu meminimalkan permintaan .

Saat menyisipkan galeri dari bingkai media, semua data yang diperlukan untuk merender galeri harus tersedia di koleksi wp.media.model.Attachments.all . Akan lebih baik menggunakan data yang sudah ada di memori alih-alih memunculkan permintaan baru untuk setiap gambar. Opsi lainnya adalah mengambil data untuk semua gambar dalam satu permintaan.

Saya memang mencoba menonaktifkan withAPIData untuk komponen GalleryImage dan semuanya tampak terus bekerja dengan benar, tetapi saya tidak menguji secara menyeluruh. Jika itu dihapus, galeri akan ditampilkan hampir seketika.

Masalah Terkait dan/atau PR

PR #2488 menempatkan bingkai media dalam keadaan yang benar saat mengedit galeri, tetapi juga mencegah permintaan AJAX terpisah untuk setiap gambar saat membuka modal.