Como fazer a pré-busca no app create-react com o Quicklink

Addy Osmani

Anton Karlovskiy

Demián Renzulli

Este codelab mostra como implementar a biblioteca Quicklink em uma demonstração de SPA do React para demonstrar como a pré-busca acelera as navegações subsequentes.

Medir

Antes de adicionar otimizações, é sempre uma boa ideia analisar primeiro o estado atual do aplicativo.

• Clique em Remixar para editar para tornar o projeto editável.
• Para visualizar o site, pressione Ver app. Em seguida, pressione Tela cheia

O site é uma demonstração simples criada com create-react-app.

Siga estas instruções na nova guia aberta:

1. Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir o DevTools.
2. Clique na guia Rede.
3. Marque a caixa de seleção Desativar cache.
4. Na lista suspensa "Limitação, selecione 3G rápido para simular um tipo de conexão lenta.
5. Atualize o app.
6. Digite chunk na caixa de texto Filtrar para ocultar recursos que não incluam chunk no nome.

O site usa a divisão de código com base em rota. Dessa forma, apenas o código necessário é solicitado no início.

1. Limpe as solicitações de rede no DevTools.
2. No app, clique no link Blog para acessar essa página.

Os blocos de JS e CSS da nova rota são carregados para renderizar a página.

Em seguida, você implementará o Quicklink neste site, para que esses blocos possam ser pré-buscados na página inicial, tornando a navegação mais rápida.

Isso permite combinar o melhor das duas técnicas:

• A divisão de código com base em rota informa ao navegador para carregar apenas os blocos necessários em uma prioridade mais alta no tempo de carregamento da página.
• A pré-busca diz ao navegador para carregar os blocos para links na janela de visualização com a menor prioridade, durante o tempo ocioso do navegador.

Configurar webpack-route-manifest

A primeira etapa é instalar e configurar o webpack-route-manifest, um plug-in de webpack que permite gerar um arquivo de manifesto associando rotas aos blocos correspondentes.

Normalmente, é necessário instalar a biblioteca, mas já fizemos isso para você. Confira o comando que você precisa executar:

npm install webpack-route-manifest --save-dev

O config-overrides.js é um arquivo colocado no diretório raiz do projeto, em que é possível modificar o comportamento já existente da configuração do webpack sem precisar ejetar o projeto.

• Para conferir a fonte, pressione Ver código-fonte.

Abra config-overrides.js para edição e adicione a dependência webpack-route-manifest no início do arquivo:

const path = require('path');
const RouteManifest = require('webpack-route-manifest');

Em seguida, configure o plug-in webpack-route-manifest adicionando o seguinte na parte inferior de config-overrides.js:

module.exports = function override(config) {
  config.resolve = {
    ...config.resolve,
    alias: {
      '@assets': `${path.resolve(__dirname, 'src/assets')}`,
      '@pages': `${path.resolve(__dirname, 'src/pages')}`,
      '@components': `${path.resolve(__dirname, 'src/components')}`,
    },
  };

  config.plugins.push(
    new RouteManifest({
      minify: true,
      filename: 'rmanifest.json',
      routes(str) {
        let out = str.replace('@pages', '').toLowerCase();
        if (out === '/article') return '/blog/:title';
        if (out === '/home') return '/';
        return out;
      },
    }),
  );

  return config;
};

O novo código faz o seguinte:

• config.resolve declara variáveis com as rotas internas para páginas, recursos e componentes.
• config.plugins.push() cria um objeto RouteManifest e transmite a ele a configuração para que o arquivo rmanifest.json possa ser gerado com base nas rotas e blocos do site.

O arquivo manifest.json será gerado e disponibilizado em https://site_url/rmanifest.json.

Configurar link rápido

Neste ponto, você precisa instalar a biblioteca Quicklink no seu projeto. Para simplificar, já a adicionamos ao projeto. Confira o comando que você precisa executar:

npm install --save quicklink

Abra src/components/App/index.js para edição.

Primeiro, importe o componente de ordem superior (HOC) do Quicklink:

import React, { lazy, Suspense } from 'react';
import { Route } from 'react-router-dom';

import Footer from '@components/Footer';
import Hero from '@components/Hero';
import style from './index.module.css';
import { withQuicklink } from 'quicklink/dist/react/hoc.js';

const Home = lazy(() => import(/* webpackChunkName: "home" */ '@pages/Home'));
const About = lazy(() => import(/* webpackChunkName: "about" */ '@pages/About'));
const Article = lazy(() => import(/* webpackChunkName: "article" */ '@pages/Article'));
const Blog = lazy(() => import(/* webpackChunkName: "blog" */ '@pages/Blog'));

Em seguida, crie um objeto options após a declaração da variável Blog para usar como argumento ao chamar quicklink:

const options = {
    origins: []
};

Por fim, envolva cada rota com o componente de ordem superior withQuicklink(), transmitindo um parâmetro options e o componente de destino da rota:

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 código anterior instrui a pré-busca de blocos para as rotas encapsuladas com withQuicklink() quando o link chega à visualização.

Medir de novo

Repita as seis primeiras etapas da seção Medir. Não acesse a página do blog ainda.

Quando a página inicial carrega os blocos dessa rota são carregados. Depois disso, o Quicklink pré-busca os blocos da rota para os links na janela de visualização:

Esses blocos são solicitados com a menor prioridade e sem bloquear a página.

Próximo:

1. Limpe o registro de rede novamente.
2. Desmarque a caixa de seleção Desativar cache.
3. Clique no link Blog para acessar essa página.

A coluna Tamanho indica que esses blocos foram recuperados do "cache de pré-busca", e não da rede. O carregamento desses blocos sem um Quicklink levou aproximadamente 580 ms. Usando a biblioteca, agora leva 2 ms, o que representa uma redução de 99% .