От автора: добавление шрифтов не должно отрицательно сказаться на производительности. В этой статье мы рассмотрим лучшие практики загрузки шрифтов в приложении Vue.
Правильное объявление font-face для пользовательских шрифтов
Обеспечение правильного объявления шрифтов — важный аспект загрузки шрифтов. Это делается с помощью свойства font-face. В проекте Vue это объявление можно разместить в корневом файле CSS. Прежде чем мы перейдем далее, давайте рассмотрим структуру приложения Vue:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/root public/ fonts/ Roboto/ Roboto-Regular.woff2 Roboto-Regular.woff index.html src/ assets/ main.css components/ router/ store/ views/ main.js |
Мы можем разместить объявление font-face в main.css следующим образом:
|
1 2 3 4 5 6 7 8 9 10 |
// 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:, который указывает браузеру на короткое время скрыть текст, пока шрифт не загрузится полностью. Другие возможные значения: 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 добавьте следующее:
|
1 |
<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, то в файл public / index.html вы можете добавить следующее:
|
1 2 3 |
<link rel="preconnect" href="https://fonts.gstatic.com"> ... <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> |
Это поможет установить начальное соединение с источником https://fonts.gstatic.com, и к тому времени, когда браузеру потребуются ресурсы от источника, соединение уже будет установлено. Разницу можно увидеть на изображениях ниже:
Когда шрифт загружается без link = preconnect, вы можете увидеть время, необходимое для подключения (поиск DNS, начальное соединение, SSL и т. Д.). Результаты выглядят совсем иначе, чем тогда, когда используется link = preconnect:
Как вы можете заметить, время больше не тратится на поиск DNS, начальное соединение и SSL, потому что соединение уже было установлено ранее.
Кеширование шрифтов с помощью сервис воркеров
Шрифты — это статические ресурсы, которые не сильно меняются, поэтому они являются хорошими кандидатами для кеширования. В идеале ваш веб-сервер должен устанавливать более длинный max-age expires для шрифтов, чтобы браузер кэшировал их дольше. Если вы создаете прогрессивное веб-приложение (PWA), вы можете использовать сервис воркеры для кэширования шрифтов и их обслуживания непосредственно из кеша.
Чтобы начать создание PWA с помощью Vue, используйте инструмент vue-cli для запуска нового проекта:
|
1 |
vue create pwa-app |
Выберите параметр «Выбрать функции вручную», а затем выберите «Поддержка прогрессивного веб-приложения (PWA)»:
Это единственное, что нам нужно для создания шаблона PWA. Как только это будет сделано, вы можете сменить каталог на pwa-app:
|
1 2 |
cd pwa-app yarn serve |
Вы заметите файл registerServiceWorker в каталоге src, который содержит конфигурацию по умолчанию. В корне вашего проекта создайте vue.config.js, если он не существует, или добавьте туда следующее, если такой файл уже есть:
|
1 2 3 4 5 6 7 8 9 10 |
// vue.config.js module.exports = { pwa: { workboxOptions: { skipWaiting: true, clientsClaim: true, } } } |
Инструмент vue-cli генерирует сервис-воркер с плагином PWA. Под капотом он использует Workbox для настройки сервис-воркера и элементов, которыми он управляет, стратегии кэширования и других необходимых конфигураций. В приведенном выше фрагменте кода мы видим, что наше приложение всегда контролируется последней версией сервис-воркера. Это необходимо, потому что это гарантирует, что пользователи всегда просматривают последнюю версию приложения. Вы можете изучить документацию по конфигурации Workbox, чтобы лучше контролировать поведение созданного сервис-воркера.
Затем мы добавим наш шрифт в общедоступный каталог. У меня такая структура:
|
1 2 3 4 5 6 7 |
root/ public/ index.html fonts/ Roboto/ Roboto-Regular.woff Roboto-Regular.woff2 |
Когда вы закончите разработку приложения Vue, вы можете собрать его, выполнив эту команду из терминала:
|
1 |
yarn build |
Результат будет помещён в папку dist. Если вы проверите содержимое папки, вы заметите файл, похожий на файл preache-manifest.1234567890.js. Он содержит список ресурсов для кеширования, который представляет собой просто список пар ключ-значение, содержащих версию и URL-адреса:
|
1 2 3 4 5 6 7 |
self.__precacheManifest = (self.__precacheManifest || []).concat([ { "revision": "3628b4ee5b153071e725", "url": "/fonts/Roboto/Roboto-Regular.woff2" }, ... ]); |
Все что находится в папке public/ по умолчанию кэшируется, включая и наш шрифт. Теперь, вы можете обслуживать приложение с помощью такого пакета, как serve или размещать папку dist на веб-сервере для просмотра результатов. Ниже приведён скрин экрана приложения:
Заключение
В этом посте мы рассмотрели некоторые рекомендации, которые можно применить при загрузке шрифтов в приложениях Vue. Применение этих методов гарантирует, что вы будете использовать шрифты, которые хорошо выглядят, без ущерба для производительности приложения.
Автор: Kelvin Gobo
Источник: blog.logrocket.com
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен
