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

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

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

Правильное объявление font-face для пользовательских шрифтов

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

Мы можем разместить объявление font-face в main.css следующим образом:

Фреймворк VUE JS: быстрый старт

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Первое, что следует отметить, это 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 добавьте следующее:

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

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

Использование link = preconnect для размещенных шрифтов

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

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

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

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

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

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

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

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

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

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

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Выберите параметр «Выбрать функции вручную», а затем выберите «Поддержка прогрессивного веб-приложения (PWA)»:

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

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

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

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

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

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

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

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

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

Заключение

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

Автор: Kelvin Gobo

Источник: blog.logrocket.com

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Фреймворк VUE JS

VUE JS - полное руководство для современной веб-разработки

Подробнее

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.