Рекомендации по загрузке шрифтов в Vue.js

оптимизация производительности Vue.js
Рекомендации по загрузке шрифтов в Vue.js

Оригинальный блог Post.:blog.Zhang Bing.site/2021/04/07/…

Добавление шрифтов не должно отрицательно сказываться на производительности. В этой статье мы рассмотрим лучшие методы загрузки шрифтов в приложение Vue.

правильное утверждениеfont-faceшрифт

Обеспечение правильного объявления шрифтов является важным аспектом загрузки шрифтов. Это делается с помощьюfont-faceсвойство для объявления шрифта по вашему выбору. В вашем проекте Vue это объявление можно сделать в корневом файле CSS. Прежде чем перейти к этому вопросу, давайте взглянем на структуру приложения Vue.

/root
  public/
    fonts/
      Roboto/
        Roboto-Regular.woff2
        Roboto-Regular.woff
    index.html
  src/
    assets/
      main.css
    components/
    router/
    store/
    views/
    main.js

мы можем сделать это такmain.cssв ходе выполненияfont-faceутверждение:

// src/assets/main.css

@font-face {
  font-family: "Roboto";
  font-weight: 400;
  font-style: normal;
  font-display: auto;
  unicode-range: U+000-5FF;
  src: local("Roboto"), url("/fonts/Roboto/Roboto-Regular.woff2") format("woff2"), url("/fonts/Roboto/Roboto-Regular.woff") format("woff");
}

Первое, что нужно заметить, это то, чтоfont-display:auto. использоватьautoВ качестве значения он указывает браузеру использовать наиболее подходящую стратегию для отображения шрифта. Это зависит от таких факторов, как скорость сети, тип устройства, время простоя и т. д.

Для большего контроля над загрузкой шрифтов вы должны использоватьfont-display: block, который указывает браузеру ненадолго скрыть текст, пока шрифт не будет полностью загружен. Другие возможные значенияswap,fallbackа такжеoptional. ты сможешьздесьУзнайте больше о них.

должен быть в курсеunicode-range: U+000-5FFОн указывает браузеру загружать только нужный диапазон глифов (U + 000 - U + 5FF). Вы хотите использоватьwoff и woff2.Форматы шрифтов, оптимизированные для использования в большинстве современных браузеров.

Также обратите внимание, чтоsrcзаказ. Во-первых, мы проверяем, доступна ли локальная копия шрифта (local("Roboto”)) и используйте его. Многие устройства Android поставляются с предустановленной программой Roboto, и в этом случае мы будем использовать предустановленную копию. Если у вас нет локальной копии, перейдите к загрузке формата woff2, если ваш браузер поддерживает его. В противном случае он переходит к следующему шрифту в поддерживаемом объявлении.

Предварительно загрузить шрифты

Как только ваш пользовательский шрифт объявлен, вы можете использовать<link rel="preload">Скажите браузеру заранее загрузить шрифты. существуетpublic/index.html, добавьте следующее:

<link rel="preload" as="font" href="./fonts/Roboto/Roboto-Regular.woff2" type="font/woff2" crossorigin="anonymous">

rel = “preload”инструктирует браузер начать получение ресурса как можно скорее,as = “font”Сообщите браузеру, что это шрифт, поэтому он отдает приоритет запросу. Также обратите вниманиеcrossorigin=“anonymous", потому что без этого атрибута браузер отбрасывает предварительно загруженные шрифты. Это связано с тем, что браузеры получают шрифты анонимно, поэтому использование этого свойства разрешает анонимные запросы.

использоватьlink=preloadВы можете увеличить вероятность того, что пользовательские шрифты будут загружены до того, как они будут необходимы. Этот маленький твик значительно ускоряет время загрузки шрифта, тем самым ускоряя рендеринг текста в вашем веб-приложении.

Управление шрифтами с помощью link=preconnect

когда используешьGoogle fontsПри размещении шрифтов для других сайтов это можно сделать с помощьюlink=preconnectдля более быстрой загрузки. Он говорит браузеру заранее установить соединение с доменным именем.

Если вы используете шрифт Roboto, предоставленный Google Fonts, вы можете найти его по адресуpublic/index.htmlсделать следующее в:

<link rel="preconnect" href="https://fonts.gstatic.com">
...
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

Это создает происхождение сfonts.gstatic.comПервоначальное соединение, когда браузеру нужно получить ресурс из источника, соединение уже установлено. Разницу между ними можно увидеть на рисунке ниже.

Не используется при загрузке шрифтовlink=preconnect, вы можете увидеть, сколько времени ушло на подключение (поиск DNS, начальное подключение, SSL и т. д.). при таком использованииlink=preconnect, результаты выглядят совсем иначе.

Здесь вы обнаружите, что время, затраченное на поиск DNS, начальное соединение и SSL, ушло, потому что соединение было установлено ранее.

Кеширование шрифтов с помощью сервис-воркеров

Шрифты — это статические ресурсы, которые почти не изменяются, поэтому они являются хорошими кандидатами на кеширование. В идеале ваш веб-сервер должен установить более длинный шрифт.max-age expiresзаголовок, поэтому браузер кэширует шрифт дольше. Если вы создаете прогрессивное веб-приложение (PWA), вы можете использоватьservice workersкэшировать шрифты и обслуживать их непосредственно из кэша.

Чтобы начать создавать PWA с помощью Vue, используйте инструмент vue-cli для создания нового проекта:

vue create pwa-app

выберитеManually select featuresпараметры, затем выберитеProgressive Web App (PWA) Support:

Это все, что нам нужно для создания шаблона PWA. После этого вы можете изменить каталог наpwa-app, а затем обслуживайте приложение.

cd pwa-app
yarn serve

вы заметите вsrcВ каталоге есть файлregisterServiceWorker, который содержит конфигурацию по умолчанию. В корневом каталоге проекта, еслиvue.config.jsне существует, создайте его, если он существует, добавьте следующее:

// vue.config.js
module.exports = {
  pwa: {
    workboxOptions: {
      skipWaiting: true,
      clientsClaim: true,
    }
  }
}

использование инструмента vue-cliPWA pluginСоздайте сервисного работника. Под капотом он используетWorkboxдля настройки сервис-воркера и элементов, которыми он управляет, используемой стратегии кэширования и других необходимых настроек.

В приведенном выше фрагменте кода мы хотим убедиться, что наше приложение всегда контролируется последней версией сервис-воркера. Это необходимо, так как гарантирует, что наши пользователи всегда проверяют последнюю версию приложения. Вы можете ознакомиться с документацией по настройке Workbox для большего контроля над поведением сгенерированного работника службы.

Затем мы добавляем пользовательский шрифт вpublicсодержание. У меня есть следующая структура:

root/
  public/
    index.html
    fonts/
      Roboto/
        Roboto-Regular.woff
        Roboto-Regular.woff2

После того, как вы закончили разработку своего приложения Vue, вы можете создать его, выполнив следующие команды из терминала:

yarn build

Это выводит результат наdistпапка. Если вы изучите содержимое папки, вы заметите строку, похожую наprecache-manifest.1234567890.jsдокумент. Он содержит список активов для кэширования, который представляет собой просто список пар ключ-значение, содержащий версию и URL-адрес.

self.__precacheManifest = (self.__precacheManifest || []).concat([
  {
    "revision": "3628b4ee5b153071e725",
    "url": "/fonts/Roboto/Roboto-Regular.woff2"
  },
  ...
]);

public/Все в папке кэшируется по умолчанию, включая пользовательские шрифты. В этом месте вы можете использовать такие пакеты, как сервис, дляserveваше приложение, или поставитьdistПапки размещаются на веб-сервере для просмотра результатов. Вы можете найти скриншот приложения ниже.

При последующих посещениях шрифты загружаются из кеша, что может ускорить загрузку приложения.

В заключение

В этом посте мы рассмотрели некоторые рекомендации по загрузке шрифтов в приложение Vue. Использование этих методов гарантирует, что предоставленные вами шрифты будут хорошо выглядеть, не влияя на производительность вашего приложения.

Категории