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:
- Pressione "Control + Shift + J" (ou "Command + Option + J" no Mac) para abrir o DevTools.
- Clique na guia Rede.
- Marque a caixa de seleção Desativar cache.
- Na lista suspensa de Limitação, selecione 3G rápido para simular um tipo de conexão lenta.
- Atualize o app.
- Digite
chunk
na caixa de texto Filtro para ocultar os recursos que não incluamchunk
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.
- Limpe as solicitações de rede no DevTools.
- 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 objetoRouteManifest
e transmite a ele a configuração para que o arquivormanifest.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:
- Limpe o registro de rede novamente.
- Desmarque a caixa de seleção Desativar cache.
- 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% .