Adicionar fontes não deve afetar negativamente o desempenho. Neste artigo, veremos as práticas recomendadas para carregar fontes em um aplicativo Vue.
Declarar corretamente font-face para fontes personalizadas
Certificar-se de que as fontes estão devidamente declaradas é um aspecto importante do carregamento de fontes. Isso é feito usando a propriedade font-face para declarar a fonte escolhida. Em seu projeto Vue, esta declaração pode ser feita em seu arquivo CSS raiz. Antes de entrarmos nisso, vamos dar uma olhada na estrutura do aplicativo Vue:
/root público/ fontes/ Roboto/ Roboto-Regular.woff2 Roboto-Regular.woff index.html src/ bens/ main.css componentes/ roteador/ armazenar/ Visualizações/ main.js
Podemos fazer a declaração font-face em main.css assim:
//src/assets/main.css @Tipo de letra { família de fontes:"Roboto"; peso da fonte: 400; estilo da fonte: normal; exibição de fonte: auto; intervalo Unicode: U + 000-5FF; src: formato local ("Roboto"), url ("/fonts/Roboto/Roboto-Regular.woff2") ("woff2"), formato url ("/fonts/Roboto/Roboto-Regular.woff") ("woff");
}
A primeira coisa a observar é font-display: auto . Usar auto como valor permite que o navegador use a estratégia mais apropriada para exibir a fonte. Isso depende de alguns fatores como velocidade da rede, tipo de dispositivo, tempo ocioso e muito mais.
Para obter mais controle sobre como a fonte é carregada, você deve usar o font-display: block , que instrui o navegador a ocultar brevemente o texto até que o download completo da fonte seja feito. Outros valores possíveis são swap , fallback e optional . Você pode ler mais sobre eles aqui .
Algo a ser observado é unicode-range: U + 000-5FF , que instrui o navegador a carregar apenas os intervalos de glifos necessários (U + 000-U + 5FF). Você também deseja usar os formatos de fonte woff e woff2 que são formatos otimizados e funcionam na maioria dos navegadores modernos.
Outra coisa a ser observada é a ordem src . Primeiro, verificamos se uma cópia local da fonte está disponível ( local ("Roboto") ) e a usamos. Muitos dispositivos Android vêm com o Roboto pré-instalado. Nesse caso, a cópia pré-instalada será usada. Se uma cópia local não estiver disponível, ele fará o download do formato woff2 se compatível com o navegador. Caso contrário, ele pula para a próxima fonte na declaração que é compatível.
Pré-carregar fontes
Depois que suas fontes personalizadas forem declaradas, você pode dizer ao navegador para pré-carregar as fontes com antecedência usando . Em public/index.html , adicione o seguinte:
rel="preload" instrui o navegador a começar a buscar o recurso assim que possível. as="font" diz ao navegador que esta é uma fonte, portanto, prioriza a solicitação. Observe também o crossorigin="anonymous" porque, sem ele, a fonte pré-carregada será descartada pelo navegador. Isso ocorre porque navegadores buscam fontes anonimamente , portanto, usar este atributo permite a solicitação para ser feito anonimamente.
Usar link=preload aumenta as chances de que a fonte personalizada seja baixada antes de ser necessária. Esse pequeno ajuste acelera muito o tempo de carregamento de fontes e, consequentemente, a renderização de texto em seu aplicativo da web.
Use link=preconnect para fontes hospedadas
Ao usar fontes hospedadas de sites como fontes do Google , você pode obter um carregamento ainda mais rápido vezes usando link=preconnect . Diz ao navegador para estabelecer uma conexão com o domínio antecipadamente.
Se você estava usando a fonte Roboto fornecida pelas fontes do Google, pode fazer isso em public/index.html :
...
Isso estabelecerá a conexão inicial com a origem https://fonts.gstatic.com e com o tempo o navegador precisa de recursos da origem, a conexão já terá sido estabelecida. A diferença pode ser vista na imagem abaixo:
Quando a fonte é carregada sem link=preconnect , você pode ver o tempo que leva para conectar (pesquisa de DNS, conexão inicial, SSL, etc). Os resultados parecem muito diferentes quando link=preconnect é usado assim:
Aqui, você perceberá que o tempo gasto para a pesquisa de DNS, a conexão inicial e o SSL não estão mais lá porque a conexão já foi feita anteriormente.
Fontes de cache com service workers
As fontes são recursos estáticos que não mudam muito, então são boas candidatas para armazenamento em cache. Idealmente, seu servidor da web deve definir um max-age expira cabeçalho nas fontes para que o navegador as armazene em cache por mais tempo. Se você estiver criando um aplicativo da web progressivo (PWA), poderá usar service workers para armazenar fontes em cache e exibi-las diretamente do cache.
Para começar a construir um PWA com Vue, use a ferramenta vue-cli para gerar um novo projeto:
vue criar pwa-app
Selecione a opção Selecionar manualmente os recursos e, em seguida, selecione Suporte Progressive Web App (PWA) :
Essas são as únicas coisas que precisamos para gerar um modelo PWA. Uma vez feito isso, você pode mudar o diretório para pwa-app e servir o aplicativo:
cd pwa-app servir de fio
Você notará um arquivo registerServiceWorker no diretório src que contém a configuração padrão. Na raiz do seu projeto, crie vue.config.js se não existir ou adicione o seguinte se existir:
//vue.config.js module.exports={ pwa: { workboxOptions: { skipWaiting: true, clientsClaim: true, } }
}
A ferramenta vue-cli gera o service worker com o plugin PWA Nos bastidores, ele usa Caixa de trabalho para configurar o service worker e o elementos que ele controla, a estratégia de cache a ser usada e outras configurações necessárias. No trecho de código acima, garantimos que nosso aplicativo esteja sempre sendo controlado pela versão mais recente do service worker. Isso é necessário porque garante que nossos usuários estejam sempre visualizando a versão mais recente do aplicativo. Você pode verificar a documentação de Configuração da caixa de trabalho para obter mais controle do comportamento do service worker que é gerado.
A seguir, adicionamos nossa fonte personalizada ao diretório public . Tenho a seguinte estrutura:
root/ público/ index.html fontes/ Roboto/ Roboto-Regular.woff Roboto-Regular.woff2
Assim que terminar de desenvolver seu aplicativo Vue, você pode criá-lo executando este comando em seu terminal:
construção de fios
Isso produz os resultados na pasta dist . Se você inspecionar o conteúdo da pasta, verá um arquivo semelhante a precache-manifest.1234567890.js . Ele contém a lista de ativos para armazenar em cache, que é apenas uma lista de pares de valores-chave contendo a revisão e URLs:
self.__ precacheManifest=(self.__ precacheManifest || []). concat ([ { "revisão":"3628b4ee5b153071e725", "url":"/fonts/Roboto/Roboto-Regular.woff2" }, ...
]);
Tudo na pasta public/ é armazenado em cache por padrão, o que inclui a fonte personalizada. Com isso, você pode servir seu aplicativo com um pacote como servir ou hospedar a pasta dist em um servidor web para visualizar os resultados. Você pode encontrar uma captura de tela do aplicativo abaixo:
Em visitas subsequentes, as fontes são carregadas do cache, o que leva a tempos de carregamento mais rápidos do seu aplicativo.
Conclusão
Nesta postagem, vimos algumas das melhores práticas a serem aplicadas ao carregar fontes em aplicativos Vue. Usar essas práticas garantirá que você forneça fontes que tenham uma boa aparência sem comprometer o desempenho do seu aplicativo.
A postagem Práticas recomendadas para carregar fontes no Vue apareceu primeiro no LogRocket Blog .
