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

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

Addy Osmani
Addy Osmani
Anton Karlovskiy
Anton Karlovskiy
Demián Renzulli
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에 알리려면 다음 단계를 따르세요.

  1. 구성요소의 시작 부분에서 quicklink HOC를 가져옵니다.
  2. 각 경로를 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를 사용하여 경로와 청크로 구성된 맵을 생성하여 링크가 뷰에 들어올 때 미리 가져올 파일을 결정합니다. 사이트 전체에서 이 기법을 구현하면 탐색이 크게 개선되어 탐색이 즉시 개선되는 것처럼 보이게 할 수 있습니다.