Acelerar as navegações no React com o Quicklink

Faça a pré-busca automática de links na janela de visualização com o Quicklink para aplicativos React de página única.

Addy Osmani

Anton Karlovskiy

Demián Renzulli

A pré-busca é uma técnica para acelerar a navegação fazendo o download antecipado dos recursos da próxima página. Quicklink é uma biblioteca que permite implementar essa técnica em escala, fazendo a pré-busca automática de links à medida que eles chegam à visualização.

Em apps com várias páginas, a biblioteca faz o pré-carregamento de documentos (por exemplo, /article.html) para links no viewport. Assim, quando o usuário clica nesses links, eles podem ser buscados no cache HTTP.

Os apps de página única geralmente usam uma técnica chamada divisão de código baseada em rotas. Isso permite que o site carregue o código de uma determinada rota somente quando o usuário a acessa. Esses arquivos (JS, CSS) são comumente chamados de "blocos".

Dito isso, nesses sites, em vez de fazer precarregar documentos, os maiores ganhos de performance vêm de fazer precarregar esses blocos antes que a página precise deles.

Alcançar esse objetivo apresenta alguns desafios:

• Não é trivial determinar quais blocos (por exemplo, article.chunk.js) estão associados a uma determinada rota (por exemplo, /article) antes de chegar a ela.
• Os nomes dos URLs finais desses pedaços não podem ser previstos, porque os agrupadores de módulos modernos geralmente usam hash de longo prazo para controle de versão (por exemplo, article.chunk.46e51.js).

Este guia explica como o Quicklink resolve esses desafios e permite realizar a pré-busca em escala nos apps React de página única.

Observação: no momento, essa solução é compatível apenas com o react-router.

Teste: confira o codelab Prefetching in create-react-app with Quicklink para conferir uma demonstração prática e guiada do Quicklink.

Determinar blocos associados a cada rota

Um dos principais componentes do quicklink é o webpack-route-manifest, um plug-in do webpack que permite gerar um dicionário JSON de rotas e blocos. Isso permite que a biblioteca saiba quais arquivos serão necessários para cada rota do aplicativo e faça a pré-busca deles à medida que as rotas chegam à visualização.

Depois de integrar o plug-in ao projeto, ele vai produzir um arquivo de manifesto JSON que associa cada rota aos respectivos blocos:

{
  '/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',
    },
  ],
}

Esse arquivo de manifesto pode ser solicitado de duas maneiras:

• Por URL, por exemplo, https://site_url/rmanifest.json.
• Pelo objeto da janela, em window.__rmanifest.

Pré-busca de blocos para rotas na janela de visualização

Quando o arquivo de manifesto estiver disponível, a próxima etapa será instalar o Quicklink executando npm install quicklink.

Em seguida, o withQuicklink() do componente de ordem superior (HOC) pode ser usado para indicar que uma determinada rota precisa ser pré-buscada quando o link aparece na visualização.

O código abaixo pertence a um componente App de um app React que renderiza um menu na parte de cima com quatro links:

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>
);

Para informar ao Quicklink que essas rotas precisam ser pré-buscadas à medida que aparecem na visualização:

1. Importe o HOC quicklink no início do componente.
2. Encapsule cada rota com o HOC withQuicklink(), transmitindo o componente da página e o parâmetro de opções.

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>
);

O HOC withQuicklink() usa o caminho da rota como uma chave para receber os blocos associados de rmanifest.json. Internamente, à medida que os links aparecem na visualização, a biblioteca injeta uma tag <link rel="prefetch"> na página para cada bloco, permitindo que eles sejam pré-buscados. Os recursos pré-buscados serão solicitados com a menor prioridade pelo navegador e mantidos no cache HTTP por cinco minutos. Depois disso, as regras cache-control do recurso serão aplicadas. Como resultado, quando um usuário clica em um link e se move para uma determinada rota, os blocos são recuperados do cache, melhorando muito o tempo necessário para renderizar essa rota.

Conclusão

A pré-busca pode melhorar muito os tempos de carregamento para navegações futuras. Em apps de página única do React, isso pode ser feito carregando os blocos associados a cada rota antes que o usuário chegue nelas. A solução do Quicklink para o React SPA usa webpack-route-manifest para criar um mapa de rotas e blocos, a fim de determinar quais arquivos pré-buscar quando um link aparece. Implementar essa técnica em todo o site pode melhorar muito a navegação, a ponto de parecer instantânea.