#webpack #quasar-framework #quasar
#webpack #quasar-framework #quasar
Вопрос:
В настоящее время я использую ‘roboto-font’ в своем quasar.config
extras: [
'roboto-font'
],
но когда я запускаю chrome light house score в своем Интернете, это дает мне
Убедитесь, что текст остается видимым во время проблемы с загрузкой webfont
для чего требуется font-display: swap; in @font-face , но если я загляну в свою сборку, там есть @font-face{font-family:Roboto;font-style:normal;font-weight:300;src:url(../fonts/KFOlCnqEu92Fr1MmSU5fBBc-.865f928c.woff) format("woff")} какая-то конфигурация шрифта vendor.js . Как я могу сделать CLI, чтобы добавить font-swap для времени загрузки шрифта?
Ответ №1:
Прокомментируйте 'roboto-font' extras и добавьте это в свой index.template.html :
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900amp;display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900amp;display=swap" rel="stylesheet"></noscript>
Дополнительный код для «Устранения ресурсов, блокирующих рендеринг», который Lighthouse предоставит вам, если вы только добавите ссылку на шрифт:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900amp;display=swap" rel="stylesheet">
https://web.dev/render-blocking-resources/?utm_source=lighthouseamp;utm_medium=devtools