Gutenberg: Galerieblöcke sind langsam

Problemübersicht

Der Galerieblock, wie er derzeit implementiert ist, weist aufgrund der Anzahl der generierten Anfragen Leistungs- und Skalierungsprobleme auf. Ich bin mit den Best Practices in React nicht vertraut, aber ich werde versuchen zu erklären, was ich bei der Arbeit mit Galerien sehe.

Schritte zur Reproduktion (für Fehler)

1. Fügen Sie einen neuen Galerieblock ein

2. Klicken Sie auf die Schaltfläche "Aus Medienbibliothek einfügen", um das Medienmodal zu öffnen
   
   Dies ist ein Standardverhalten, aber nur um zu erklären, was passiert: Wenn das Medienmodal zum ersten Mal geöffnet wird, sendet es eine query-attachments AJAX-Anfrage, um die 40 neuesten Anhänge abzurufen und sie zu einer globalen Sammlung hinzuzufügen, auf die unter zugegriffen werden kann wp.media.model.Attachments.all .Beim Scrollen durch die Bibliothek werden 40 Anhänge gleichzeitig geladen.

3. Wählen Sie 10 Bilder aus und klicken Sie auf die Schaltfläche "Neue Galerie erstellen"

4. Klicken Sie auf die Schaltfläche "Galerie einfügen"
   
   __Beim Einfügen der Galerie löst der Galerieblock für jedes Bild in der Galerie eine separate Anfrage an die REST-API aus. In diesem Fall sind das 10 Anfragen, die beantwortet werden müssen, bevor die Galerie in der Vorschau angezeigt werden kann.
   
   Dies führt nicht nur zu einer Überlastung des Servers mit Anfragen, sondern führt auch zu einer suboptimalen Rendering-Verzögerung.__

5. Klicken Sie in der Symbolleiste auf die Schaltfläche Bearbeiten, um die Galerie zu aktualisieren
   
   __Der Block sendet eine get-attachment AJAX-Anfrage für jedes Bild in der Galerie. Dies geschieht jedes Mal, wenn der Medienrahmen geöffnet wird.__

6. Schließen Sie den Medienrahmen

7. Speichern Sie den Beitrag

8. Aktualisierung
   
   __Beim Laden des Editors werden die Bilder einzeln aus der REST-API geholt.__

Erwartetes Verhalten

Ich hatte erwartet, dass Galerien schneller gerendert werden. Auf meinem lokalen Computer kann das Rendern einer Galerie mit 10 Bildern zwischen 4 und 10 Sekunden dauern.

Mögliche Lösung

Wenn ein Beitrag über eine Galerie verfügt, werden die Bilddaten idealerweise vorab geladen, um zusätzliche Anfragen während des ersten Ladens zu vermeiden.

Beim Öffnen des Medienrahmens würde PR #2488 helfen, Anfragen zu minimieren .

Wenn Sie eine Galerie aus dem Medienrahmen einfügen, sollten alle zum Rendern der Galerie erforderlichen Daten in der Sammlung wp.media.model.Attachments.all verfügbar sein. Es wäre schön, Daten zu verwenden, die sich bereits im Speicher befinden, anstatt für jedes Bild eine neue Anforderung zu erstellen. Die andere Möglichkeit wäre, Daten für alle Bilder in einer einzigen Anfrage abzurufen.

Ich habe versucht, withAPIData für die GalleryImage Komponente zu deaktivieren, und alles schien weiterhin ordnungsgemäß zu funktionieren, aber ich habe es nicht gründlich getestet. Wenn das entfernt würde, würden Galerien fast sofort gerendert.

Verwandte Themen und/oder PRs

PR #2488 versetzt den Medienrahmen beim Bearbeiten einer Galerie in den richtigen Zustand, verhindert aber auch, dass beim Öffnen des Modals für jedes Bild eine separate AJAX-Anfrage erzeugt wird.