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 do React SPA para demonstrar como a pré-busca acelera as navegações subsequentes.

Medida

Antes de adicionar otimizações, é sempre bom analisar 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 o comando 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 de 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 Filtro para ocultar os recursos que não incluam chunk no nome.

O site usa divisão de código baseada em rota, graças à qual somente o código necessário é solicitado no início.

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

Os blocos 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.

Assim, é possível combinar o melhor das duas técnicas:

• A divisão de código com base em rotas 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 de links na janela de visualização com a prioridade mais baixa, 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, seria necessário instalar a biblioteca, mas já fizemos isso para você. Aqui está o comando que você precisa executar:

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

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

• Para ver a fonte, pressione Ver fonte.

Abra config-overrides.js para editar 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 código 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.
• O 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 nos 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. Aqui está o comando que você precisa executar:

npm install --save quicklink

Abra o arquivo src/components/App/index.js para editar.

Primeiro, importe o componente de pedido superior (HOC, na sigla em inglês) 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 para essa 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é-buscar blocos para as rotas unidas com withQuicklink(), quando o link entra na visualização.

Medir novamente

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

Quando a página inicial carrega, os blocos desse trajeto 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 prioridade mais baixa 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, ele agora leva 2ms, o que representa uma redução de 99% .