이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Quicklink로 React에서 탐색 속도 높이기

React 단일 페이지 애플리케이션용 퀵링크로 표시 영역 내 링크를 자동으로 미리 가져옵니다.

Addy Osmani

Anton Karlovskiy

Demián Renzulli

미리 가져오기는 다음 페이지의 리소스를 미리 다운로드하여 탐색 속도를 높이는 기법입니다. 빠른 링크는 링크가 보기로 들어올 때 자동으로 미리 가져오기하여 이 기법을 대규모로 구현할 수 있는 라이브러리입니다.

다중 페이지 앱에서 라이브러리는 표시 영역 내 링크의 문서 (예: /article.html)를 미리 가져옵니다. 따라서 사용자가 이러한 링크를 클릭하면 HTTP 캐시에서 선택할 수 있습니다.

단일 페이지 앱에서는 일반적으로 경로 기반 코드 분할이라는 기법을 사용합니다. 이렇게 하면 사용자가 해당 경로로 이동할 때만 사이트에서 지정된 경로에 대한 코드를 로드할 수 있습니다. 이러한 파일 (JS, CSS)을 일반적으로 '청크'라고 합니다.

즉, 이러한 사이트에서는 문서를 미리 가져오는 대신 페이지에 필요하기 전에 청크를 미리 가져오면 성능이 가장 크게 향상됩니다.

이를 달성하기 위해서는 몇 가지 과제가 발생합니다.

지정된 경로 (예: /article)에 착륙하기 전에 어떤 청크 (예: article.chunk.js)와 연결되는지 확인하는 것은 간단한 작업이 아닙니다.
최신 모듈 번들러는 일반적으로 버전 관리에 장기 해싱 (예: article.chunk.46e51.js)을 사용하므로 이러한 청크의 최종 URL 이름은 예측할 수 없습니다.

이 가이드에서는 Quicklink가 이러한 문제를 해결하고 React 단일 페이지 앱에서 대규모 미리 가져오기를 수행하는 방법을 설명합니다.

각 경로와 연결된 청크 결정

quicklink의 핵심 구성요소 중 하나는 webpack-route-manifest로, webpack 플러그인으로, 경로 및 청크의 JSON 사전을 생성할 수 있습니다. 이렇게 하면 라이브러리가 애플리케이션의 각 경로에 어떤 파일이 필요한지 파악하고 경로가 뷰에 들어올 때 미리 가져올 수 있습니다.

프로젝트와 플러그인을 통합하면 각 경로를 해당 청크와 연결하는 JSON 매니페스트 파일이 생성됩니다.

{
  '/about': [
    {
      type: 'style',
      href: '/static/css/about.f6fd7d80.chunk.css',
    },
    {
      type: 'script',
      href: '/static/js/about.1cdfef3b.chunk.js',
    },
  ],
  '/blog': [
    {
      type: 'style',
      href: '/static/css/blog.85e80e75.chunk.css',
    },
    {
      type: 'script',
      href: '/static/js/blog.35421503.chunk.js',
    },
  ],
}

이 매니페스트 파일은 두 가지 방법으로 요청할 수 있습니다.

URL 사용(예: https://site_url/rmanifest.json)
window.__rmanifest에서 창 객체를 통해

표시 영역 내 경로의 청크 미리 가져오기

매니페스트 파일을 사용할 수 있게 되면 다음 단계는 npm install quicklink를 실행하여 빠른 링크를 설치하는 것입니다.

그런 다음 고차 구성요소 (HOC) withQuicklink()를 사용하여 링크가 뷰에 들어갈 때 지정된 경로를 미리 가져와야 함을 나타낼 수 있습니다.

다음 코드는 네 개의 링크가 있는 상단 메뉴를 렌더링하는 React 앱의 App 구성요소에 속합니다.

const App = () => (
  <div className={style.app}>
    <Hero />
    <main className={style.wrapper}>
      <Suspense fallback={<div>Loading…</div>}>
        <Route path="/" exact component={Home} />
        <Route path="/blog" exact component={Blog} />
        <Route path="/blog/:title" component={Article} />
        <Route path="/about" exact component={About} />
      </Suspense>
    </main>
    <Footer />
  </div>
);

이러한 경로가 뷰에 들어올 때 미리 가져와야 한다고 Quicklink에 알리려면 다음 단계를 따르세요.

구성요소 시작 부분에서 quicklink HOC를 가져옵니다.
withQuicklink() HOC로 각 경로를 래핑하고 페이지 구성요소와 옵션 매개변수를 전달합니다.

const options = {
  origins: [],
};
const App = () => (
  <div className={style.app}>
    <Hero />
    <main className={style.wrapper}>
      <Suspense fallback={<div>Loading…</div>}>
        <Route path="/" exact component={withQuicklink(Home, options)} />
        <Route path="/blog" exact component={withQuicklink(Blog, options)} />
        <Route
          path="/blog/:title"
          component={withQuicklink(Article, options)}
        />
        <Route path="/about" exact component={withQuicklink(About, options)} />
      </Suspense>
    </main>
    <Footer />
  </div>
);

withQuicklink() HOC는 경로의 경로를 키로 사용하여 rmanifest.json에서 연결된 청크를 가져옵니다. 내부적으로 링크가 뷰에 들어올 때 라이브러리는 미리 가져올 수 있도록 각 단위의 페이지에 <link rel="prefetch"> 태그를 삽입합니다. 미리 가져온 리소스는 브라우저에서 가장 낮은 우선순위로 요청하며 HTTP 캐시에 5분 동안 보관합니다. 그 후에는 리소스의 cache-control 규칙이 적용됩니다. 그 결과, 사용자가 링크를 클릭하고 지정된 경로로 이동하면 청크가 캐시에서 검색되어 해당 경로를 렌더링하는 데 걸리는 시간이 크게 단축됩니다.

결론

미리 가져오기는 향후 탐색을 위한 로드 시간을 크게 개선할 수 있습니다. React 단일 페이지 앱에서는 사용자가 경로에 도달하기 전에 각 경로와 연결된 청크를 로드하면 됩니다. React SPA용 Quicklink의 솔루션은 webpack-route-manifest를 사용하여 경로와 청크의 맵을 만듭니다. 이를 통해 링크가 뷰에 나올 때 프리패치할 파일을 결정할 수 있습니다. 사이트 전체에 이 기법을 구현하면 탐색 기능을 개선하여 즉각적으로 표시할 수 있습니다.