Gutenberg: 갤러리 블록이 느림

문제 개요

현재 구현된 갤러리 블록은 생성하는 요청 수로 인해 성능 및 크기 조정 문제가 있습니다. 나는 React의 모범 사례에 익숙하지 않지만 갤러리로 작업할 때 내가 보는 것을 설명하려고 노력할 것입니다.

재현 단계(버그용)

1. 새 갤러리 블록 삽입

2. "미디어 라이브러리에서 삽입" 버튼을 클릭하여 미디어 모달을 엽니다.
   
   이것은 표준 동작이지만 어떤 일이 발생하는지 설명하기 위한 것입니다. 미디어 모달이 처음 열릴 때 query-attachments AJAX 요청을 전송하여 가장 최근의 첨부 파일 40개를 가져와 다음 위치에서 액세스할 수 있는 전역 컬렉션에 추가합니다. wp.media.model.Attachments.all .라이브러리를 스크롤하면 한 번에 40개의 첨부 파일을 지연 로드합니다.

3. 10개의 이미지를 선택하고 "새 갤러리 만들기" 버튼을 클릭합니다.

4. "갤러리 삽입" 버튼을 클릭합니다.
   
   __갤러리를 삽입할 때 갤러리 블록은 갤러리의 각 이미지에 대해 REST API에 대한 별도의 요청을 시작합니다. 이 경우 갤러리를 미리 보기 전에 응답해야 하는 10개의 요청입니다.
   
   요청으로 서버를 공격하는 것 외에도 최적화되지 않은 렌더링 지연이 발생합니다.__

5. 도구 모음에서 편집 버튼을 클릭하여 갤러리를 업데이트합니다.
   
   __블록은 갤러리의 각 이미지에 대해 get-attachment AJAX 요청을 보냅니다. 이것은 미디어 프레임이 열릴 때마다 발생합니다.__

6. 미디어 프레임 닫기

7. 게시물 저장

8. 새로 고치다
   
   __에디터가 로드되면 REST API에서 이미지를 개별적으로 가져옵니다.__

예상되는 동작

갤러리가 더 빨리 렌더링될 것으로 예상했습니다. 내 로컬 컴퓨터에서 10개의 이미지가 있는 갤러리를 렌더링하는 데 4-10초가 걸릴 수 있습니다.

가능한 해결책

이상적으로는 게시물에 갤러리가 있는 경우 초기 로드 중에 추가 요청을 방지하기 위해 이미지 데이터가 미리 로드됩니다.

미디어 프레임을 열 때 PR #2488은 요청을 최소화하는 데 도움이 됩니다.

미디어 프레임에서 갤러리를 삽입할 때 갤러리를 렌더링하는 데 필요한 모든 데이터는 wp.media.model.Attachments.all 컬렉션에서 사용할 수 있어야 합니다. 각 이미지에 대해 새 요청을 생성하는 대신 이미 메모리에 있는 데이터를 사용하는 것이 좋습니다. 다른 옵션은 단일 요청에서 모든 이미지에 대한 데이터를 가져오는 것입니다.

GalleryImage 구성 요소에 대해 withAPIData 를 비활성화하려고 시도했으며 모든 것이 계속 올바르게 작동하는 것처럼 보였지만 철저히 테스트하지 않았습니다. 그것이 제거되면 갤러리가 거의 즉시 렌더링됩니다.

관련 이슈 및/또는 PR

PR #2488은 갤러리를 편집할 때 미디어 프레임을 올바른 상태로 만들지만 모달을 열 때 각 이미지에 대해 별도의 AJAX 요청이 생성되는 것을 방지합니다.