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

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

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

Addy Osmani

Anton Karlovskiy

Demián Renzulli

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

멀티 페이지 앱에서 라이브러리는 표시 영역 내 링크의 문서 (예: /article.html)를 미리 가져오므로 사용자가 이러한 링크를 클릭하면 HTTP 캐시에서 가져올 수 있습니다.

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

그렇기는 하지만 이러한 사이트에서 문서를 미리 가져오는 대신에 가장 큰 성능 개선 효과는 페이지에 필요한 청크를 미리 가져오는 것입니다.

이를 실현하는 데에는 몇 가지 과제가 있습니다.

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

이 가이드에서는 퀵링크가 이러한 문제를 어떻게 해결하고 이를 통해 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를 사용하여 경로와 청크로 구성된 맵을 생성하여 링크가 뷰에 들어올 때 미리 가져올 파일을 결정합니다. 사이트 전체에서 이 기법을 구현하면 탐색이 크게 개선되어 탐색이 즉시 개선되는 것처럼 보이게 할 수 있습니다.