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:
- 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 "Limitação, selecione 3G rápido para simular um tipo de conexão lenta.
- Atualize o app.
- Digite
chunk
na caixa de texto Filtrar para ocultar recursos que não incluamchunk
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.
- Limpe as solicitações de rede no DevTools.
- 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 objetoRouteManifest
e transmite a ele a configuração para que o arquivormanifest.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:
- 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, agora leva 2 ms, o que representa uma redução de 99% .