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 as navegações fazendo o download dos recursos para a próxima página com antecedência. Quicklink é uma biblioteca que permite implementar essa técnica em escala, fazendo a pré-busca automática de links à medida que eles aparecem.

Em apps de várias páginas, a biblioteca faz pré-busca de documentos (por exemplo, /article.html) para links na janela de visualização. Assim, quando o usuário clica nesses links, eles podem ser extraídos do cache HTTP.

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

Dito isso, nesses sites, em vez de pré-buscar documentos, os maiores ganhos de desempenho vêm da pré-busca desses 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 blocos não podem ser previstos, já que os bundlers de módulo modernos normalmente usam hash de longo prazo para controle de versões (por exemplo, article.chunk.46e51.js).

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

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 produzirá um arquivo de manifesto JSON associando cada rota aos blocos correspondentes:

{
  '/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 de 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 é instalar o Quicklink executando npm install quicklink.

Em seguida, o componente de ordem superior (HOC) (link em inglês) withQuicklink() pode ser usado para indicar que uma determinada rota precisa ser pré-buscada quando o link entrar 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 conforme chegam à visualização:

1. Importe o HOC quicklink no início do componente.
2. Envolva 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, as partes são recuperadas 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 futuras navegações. Nos apps de página única do React, isso pode ser feito carregando os blocos associados a cada rota antes que o usuário chegue a eles. 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. A implementação dessa técnica em todo o site pode melhorar muito as navegações, fazendo com que pareçam instantaneamente.