Esta página foi traduzida pela API Cloud Translation.

Acelerar as navegações no React com o Quicklink

Faça a pré-busca automática de links na janela de visualização com links rápidos 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 da próxima página com antecedência. O Quicklink é uma biblioteca que permite implementar essa técnica em grande escala, fazendo a pré-busca automática dos links à medida que eles chegam à visualização.

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

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

Dito isso, nesses sites, em vez de fazer a pré-busca de documentos, os maiores ganhos de desempenho vêm da pré-busca desses blocos antes que a página precise deles.

Conseguir isso apresenta alguns desafios:

Não é trivial determinar quais blocos (por exemplo, article.chunk.js) estão associados a um determinado trajeto (por exemplo, /article) antes de chegar a ele.
Os nomes dos URLs finais desses blocos não podem ser previstos, já que os bundlers de módulos modernos normalmente usam hash de longo prazo para controle de versões (por exemplo, article.chunk.46e51.js).

Neste guia, explicamos como o Quicklink resolve esses desafios e permite que você faça a pré-busca em escala nos apps de página única React.

Determinar blocos associados a cada rota

Um dos principais componentes do quicklink é o webpack-route-manifest, um plug-in de webpack que permite gerar um dicionário JSON de rotas e blocos. Isso permite que a biblioteca saiba quais arquivos serão necessários em cada rota do aplicativo e faça a pré-busca deles à medida que as rotas entram na 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, como 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 é instalar o Quicklink executando npm install quicklink.

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

O código a seguir pertence a um componente App de um app React que renderiza um menu superior 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 elas aparecem na visualização:

Importe o HOC quicklink no início do componente.
Una cada trajeto com o HOC withQuicklink(), transmitindo o componente da página e o parâmetro de opções a ele.

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 do trajeto como uma chave para extrair os blocos associados do rmanifest.json. Internamente, à medida que os links aparecem, a biblioteca injeta uma tag <link rel="prefetch"> na página para cada bloco para que eles possam ser pré-buscados. Os recursos pré-buscados serão solicitados com a prioridade mais baixa 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 um determinado trajeto, os blocos são recuperados do cache, melhorando muito o tempo necessário para renderizar esse trajeto.

Conclusão

A pré-busca pode melhorar muito os tempos de carregamento para navegações futuras. Nos apps React de página única, 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 React SPA usa webpack-route-manifest para criar um mapa de rotas e blocos e determinar quais arquivos precisam ser pré-buscados quando um link aparece na visualização. A implementação dessa técnica em todo o site pode melhorar muito as navegações, fazendo com que pareçam instantâneas.