H
Hacknote.js
@hacknote_js564 подп.
1.2Kпросмотров
13 апреля 2025 г.
Score: 1.3K
Пранк, который вышел из под контроля Недавно решал проблему с тем, что после загрузки приложения происходит заметный скачок элементов страницы, связанный с загрузкой шрифтов. В процессе исследования проблемы выяснилось, что @vitejs/plugin-legacy инлайнит CSS в JS-бандл с легаси сборкой, что приводит к тому, что шрифты гарантированно будут загружены после JS и скачок неизбежен. Отказываться от plugin-legacy или возиться со сборкой было лень, поэтому я начал раздумывать над каким-то надёжным решением кроме инлайна шрифтов в base64 (чтобы они загружались синхронно). По дороге из офиса домой я по традиции решил послушать выпуск веб-стандартов. Мне сразу показался подозрительным состав ведущих в этом выпуске, но я не придал этому особого значения. По счастливой случайности одной из обсуждаемых тем была загрузка шрифтов: обсуждали тот самый вариант с инлайном в base64, а так же некий новый Font Face API (почему-то я самостоятельно не догадался загуглить его), который ещё мало где поддерживается. Придя домой, я наконец обратил внимание на дату публикации выпуска: он был датирован 1 апреля... Это был выпуск веб-стандартов 10-лентней давности, а значит тот самый Font Face API уже давным давно "Baseline Widely Awailable" и ничто не мешает мне его использовать, чтобы управлять последовательностью загрузки ресурсов приложения: const font = new FontFace( "my-font", "url(my-font.woff)", { style: "normal", weight: "400", stretch: "condensed", } ); Promise.all([ import("./app.js"), font.load(), ]).then(([app]) => { document.fonts.add(font); app.init(); }); Не сказал бы, что это это прям правильное решение проблемы, но в моём кейсе самым главным фактором было то, что оно даёт контроль над последовательностью загрузки ресурсов приложения и позволяет избежать гонок. Таким образом выпуск веб-стандартов прошёл проверку временем и внезапно оказался полезен даже спустя 10 лет после выхода.
1.2K
просмотров
1924
символов
Нет
эмодзи
Нет
медиа

Другие посты @hacknote_js

Все посты канала →
Пранк, который вышел из под контроля Недавно решал проблему — @hacknote_js | PostSniper