Acelerar as navegações no React com o Quicklink

Pré-carregue automaticamente links no viewport com o link rápido para aplicativos de página única do React.

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 grande escala, fazendo o pré-carregamento automático de links à medida que eles aparecem na 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 navegar até ela. Esses arquivos (JS, CSS) são comumente chamados de "fragmentos".

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

Isso apresenta alguns desafios:

• Não é trivial determinar quais partes (por exemplo, article.chunk.js) estão associadas 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 que você faça a pré-busca em escala em apps de página única do React.

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 os 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 o pré-carregamento deles conforme as rotas aparecem na 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é-buscar blocos para rotas no viewport

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 aparecer na visualização.

O código abaixo 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 à 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. Por trás dos bastidores, à medida que os links aparecem na visualização, a biblioteca injeta uma tag <link rel="prefetch"> na página para cada bloco, para que eles possam ser pré-carregados. 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 acesse. A solução do Quicklink para React SPA usa webpack-route-manifest para criar um mapa de rotas e blocos, a fim de determinar quais arquivos serão pré-carregados quando um link aparecer na visualização. A implementação dessa técnica em todo o site pode melhorar muito a navegação, a ponto de parecer instantânea.