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

Question

[MaximPatrushev]

Имеется проект на 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 стратегии:

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

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

Буду благодарен за любую помощь.

Answer 1

[WinPooh32]

preload нужно прописывать в самом html, иначе от него не будет толку.

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

Comments

[MaximPatrushev]

Какого плагина?

[WinPooh32]

MaximPatrushev, который загружает ваш скомпиленый less-код.

[MaximPatrushev]

WinPooh32, отдельного плагина для этого не стоит, все зашито в CRA