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

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

React 단일 페이지 애플리케이션의 빠른 링크를 사용하여 뷰포트 내 링크를 자동으로 미리 가져옵니다.

Addy Osmani

Anton Karlovskiy

Demián Renzulli

미리 가져오기는 다음 페이지의 리소스를 미리 다운로드하여 탐색 속도를 높이는 기술입니다. Quicklink는 뷰에 표시될 때 링크를 자동으로 미리 로드하여 이 기술을 대규모로 구현할 수 있는 라이브러리입니다.

멀티페이지 앱에서 라이브러리는 뷰포트 내 링크의 문서 (예: /article.html)를 미리 가져와 사용자가 이러한 링크를 클릭할 때 HTTP 캐시에서 가져올 수 있도록 합니다.

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

하지만 이러한 사이트에서는 문서를 미리 가져오는 대신 페이지에 이러한 청크가 필요해지기 전에 미리 가져오는 것이 가장 큰 성능 향상을 가져옵니다.

이를 달성하는 데는 몇 가지 문제가 있습니다.

특정 경로 (예: /article)에 도달하기 전에 해당 경로와 연결된 청크 (예: article.chunk.js)를 결정하는 것은 간단하지 않습니다.
최신 모듈 번들러는 일반적으로 버전 관리에 장기 해싱 (예: article.chunk.46e51.js)을 사용하므로 이러한 청크의 최종 URL 이름은 예측할 수 없습니다.

이 가이드에서는 Quicklink가 이러한 문제를 해결하고 React 싱글페이지 앱에서 대규모로 미리 로드하는 방법을 설명합니다.

각 경로와 연결된 청크 확인

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

프로젝트와 플러그인을 통합하면 각 경로를 해당 청크와 연결하는 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를 실행하여 Quicklink를 설치하는 것입니다.

그런 다음 고차 구성요소 (HOC) withQuicklink()를 사용하여 링크가 뷰에 표시될 때 특정 경로를 미리 가져와야 한다고 표시할 수 있습니다.

다음 코드는 4개의 링크가 있는 상단 메뉴를 렌더링하는 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"> 태그를 삽입하여 미리 가져올 수 있도록 합니다. 미리 가져온 리소스는 브라우저에서 가장 낮은 우선순위로 요청되고 5분 동안 HTTP 캐시에 보관되며, 그 후에는 리소스의 cache-control 규칙이 적용됩니다. 따라서 사용자가 링크를 클릭하여 지정된 경로로 이동하면 청크가 캐시에서 검색되어 해당 경로를 렌더링하는 데 걸리는 시간이 크게 개선됩니다.

결론

미리 가져오기를 사용하면 향후 탐색의 로드 시간을 크게 개선할 수 있습니다. React 단일 페이지 앱에서는 사용자가 각 경로에 도달하기 전에 각 경로와 연결된 청크를 로드하여 이를 실행할 수 있습니다. React SPA용 Quicklink 솔루션은 webpack-route-manifest를 사용하여 경로 및 청크의 맵을 만들고 링크가 뷰에 표시될 때 미리 로드할 파일을 결정합니다. 사이트 전체에 이 기법을 구현하면 탐색이 즉시 이루어지는 것처럼 보이도록 탐색을 크게 개선할 수 있습니다.