@MaximPatrushev

Как оптимизировать загрузку шрифтов в react?

Имеется проект на react, в качестве css препроцессора используется less. Шрифты подключаются в отдельном .less файле:
@font-face {
    font-family: 'Roboto-Bold';
    src: url('../fonts/Roboto-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

Этот файл импортируется в общий файл со стилями :
@import "fonts";

Google page speed ругается на отсутствие preload стратегии:
5e4ce1621a81f411362408.png
При этом для проектов с sass препроцессором page speed не выдает таких ошибок, я так понимаю webpack сам это оптимизирует.

В проекте используется CRA и customize-cra, less лоадер подключается в config-overrides.js:
module.exports = override(
addLessLoader({
javascriptEnabled: true,
}),
);
Возможно, требуются еще какие то плагины для вебпака, но я не смог нагуглить информации по этому поводу.

Буду благодарен за любую помощь.
  • Вопрос задан
  • 1009 просмотров
Пригласить эксперта
Ответы на вопрос 1
WinPooh32
@WinPooh32
Stack Overflow answer searching expert
preload нужно прописывать в самом html, иначе от него не будет толку.

Смотрите настройки плагина, он может инжектить файлы для предзагрузки в html.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы