Gutenberg: ギャラリーブロックが遅い

問題の概要

現在実装されているGalleryブロックには、生成するリクエストの数が原因で、パフォーマンスとスケーリングの問題があります。 私はReactのベストプラクティスに精通していませんが、ギャラリーで作業するときに何が表示されるかを説明しようと思います。

再現手順（バグの場合）

1. 新しいギャラリーブロックを挿入します

2. [メディアライブラリから挿入]ボタンをクリックして、メディアモーダルを開きます
   
   これは標準的な動作ですが、何が起こるかを説明するためだけです。メディアモーダルを初めて開くと、 query-attachments AJAXリクエストを送信して、最新の40個の添付ファイルをフェッチし、でアクセス可能なグローバルコレクションに追加します。 wp.media.model.Attachments.all 。ライブラリをスクロールすると、一度に40個の添付ファイルが遅延ロードされます。

3. 10枚の画像を選択し、[新しいギャラリーを作成]ボタンをクリックします

4. 「ギャラリーを挿入」ボタンをクリックします
   
   __ギャラリーを挿入すると、Galleryブロックは、ギャラリー内の画像ごとにRESTAPIへの個別のリクエストを起動します。 この場合、ギャラリーをプレビューする前に応答する必要がある10個のリクエストです。
   
   サーバーをリクエストで非難することに加えて、これは次善のレンダリング遅延も作成します。__

5. ツールバーの編集ボタンをクリックして、ギャラリーを更新します
   
   __ブロックは、ギャラリー内の各画像に対してget-attachment AJAXリクエストを送信します。 これは、メディアフレームが開かれるたびに発生します。__

6. メディアフレームを閉じる

7. 投稿を保存する

8. 更新
   
   __エディターが読み込まれると、画像はRESTAPIから個別にフェッチされます。__

予想される行動

ギャラリーがより速くレンダリングされることを期待していました。 私のローカルマシンでは、10枚の画像を含むギャラリーのレンダリングに4〜10秒かかる場合があります。

考えられる解決策

理想的には、投稿にギャラリーがある場合、最初の読み込み中に余分なリクエストが発生しないように、画像データが事前に読み込まれます。

メディアフレームを開くとき、PR＃2488はリクエストを最小限に抑えるのに役立ちます。

メディアフレームからギャラリーを挿入する場合、ギャラリーのレンダリングに必要なすべてのデータがwp.media.model.Attachments.allコレクションで利用可能である必要があります。 画像ごとに新しいリクエストを生成するのではなく、すでにメモリにあるデータを使用すると便利です。 もう1つのオプションは、1回のリクエストですべての画像のデータをフェッチすることです。

GalleryImageコンポーネントのwithAPIDataを無効にしてみましたが、すべてが正常に機能しているように見えましたが、十分にテストしていませんでした。 それが削除された場合、ギャラリーはほぼ瞬時にレンダリングされます。

関連する問題および/またはPR

PR＃2488は、ギャラリーを編集するときにメディアフレームを正しい状態にしますが、モーダルを開くときに画像ごとに個別のAJAXリクエストが生成されるのを防ぎます。