React 단일 페이지 애플리케이션의 빠른 링크를 사용하여 뷰포트 내 링크를 자동으로 미리 가져옵니다.
미리 가져오기는 다음 페이지의 리소스를 미리 다운로드하여 탐색 속도를 높이는 기술입니다. 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
를 사용하여 경로 및 청크의 맵을 만들고 링크가 뷰에 표시될 때 미리 로드할 파일을 결정합니다.
사이트 전체에 이 기법을 구현하면 탐색이 즉시 이루어지는 것처럼 보이도록 탐색을 크게 개선할 수 있습니다.