Skip to content

대규모 프로젝트와 캐시

PageFlow는 모든 라우트를 동시에 활성 문서로 렌더링하지 않습니다. 렌더링과 캐시 전략에 한계를 두어 큰 그래프도 탐색할 수 있게 합니다.

뷰포트 렌더링

가까운 DOM 미리보기와 LeaferJS 장면 객체만 마운트됩니다. 먼 페이지는 간결한 표현을 사용하고, 선택된 한 페이지는 활성 iframe으로 전환됩니다.

썸네일 단계

가까운 페이지는 상세 미리보기를 사용할 수 있습니다. 먼 페이지는 작은 WebP 썸네일을 사용하며, 긴 페이지는 뷰포트에 마운트되는 타일로 분할할 수 있습니다. 새 캡처가 만들어지는 동안 오래된 썸네일은 계속 보입니다.

캡처 대기열

캡처 전 글꼴과 이미지 로드 및 DOM 안정화를 기다립니다. 작업은 한 번에 한 페이지씩 수행되며 선택된 페이지와 보이는 페이지가 우선됩니다.

레이아웃과 조회

1,000페이지가 넘는 그래프는 레이아웃 작업을 Worker로 옮길 수 있습니다. 공간 인덱스가 매 뷰포트 갱신 때 전체 그래프를 훑지 않고 보이는 페이지를 찾습니다.

캐시 위치

영구 썸네일은 다음 위치에 저장됩니다.

text
.unplugin-pageflow/cache

메모리와 디스크 캐시는 고정된 LRU 용량을 사용합니다. 이 디렉터리는 삭제 가능한 개발 출력이며 완전히 새로 캡처해야 할 때 제거할 수 있습니다.

실용적인 지침

  • 의미 있는 경로 구간으로 라우트를 그룹화하세요.
  • 동적 매개변수에 안정적인 예시 값을 제공하세요.
  • fixture 데이터로 미리보기 페이지를 결정적으로 만드세요.
  • 오래 실행되는 비동기 페이지에는 준비 신호를 사용하세요.

MIT 라이선스로 공개됩니다.