Nuxt.js - предварительная загрузка шрифтов в рабочей среде

ProgramBox

Nuxt.js — предварительная загрузка шрифтов в рабочей среде

Post author:admin
Запись опубликована:8 мая, 2023
Post category:Вопросы по программированию

#vue.js #nuxt.js

Вопрос:

Во время разработки все в порядке — в предварительной загрузке есть шрифты, изображения, скрипты. Но когда я создаю рабочую среду, шрифты не попадают в предварительную загрузку. Есть все, кроме шрифтов.

 render: {
    http2: {
        push: true,
        pushAssets: (req, res, publicPath, preloadFiles) => console.log(preloadFiles)
    }
}

Вывод в dev ( nuxt )

 [         
  {
    file: 'runtime.js',
    extension: 'js',
    fileWithoutQuery: 'runtime.js',
    asType: 'script'
  },
  {
    file: 'vendors.app.js',
    extension: 'js',
    fileWithoutQuery: 'vendors.app.js',
    asType: 'script'
  },
  {
    file: 'app.js',
    extension: 'js',
    fileWithoutQuery: 'app.js',
    asType: 'script'
  },
  {
    file: 'assets/fonts/Play.woff',
    extension: 'woff',
    fileWithoutQuery: 'assets/fonts/Play.woff',
    asType: 'font'
  },
  {
    file: 'assets/fonts/Play.woff2',
    extension: 'woff2',
    fileWithoutQuery: 'assets/fonts/Play.woff2',
    asType: 'font'
  },
  {
    file: 'pages/index.js',
    extension: 'js',
    fileWithoutQuery: 'pages/index.js',
    asType: 'script'
  },
  {
    file: 'assets/images/logo.svg',
    extension: 'svg',
    fileWithoutQuery: 'assets/images/logo.svg',
    asType: 'image'
  },
]

Вывод в рабочей среде ( nuxt build; nuxt start ):

 [   
  {
    file: '5e0bcb963558b2151b59.js',
    extension: 'js',
    fileWithoutQuery: '5e0bcb963558b2151b59.js',
    asType: 'script'
  },
  {
    file: 'a8df7e6ca1b41b6ba1f3.js',
    extension: 'js',
    fileWithoutQuery: 'a8df7e6ca1b41b6ba1f3.js',
    asType: 'script'
  },
  {
    file: 'da6509a7baaff1386039.js',
    extension: 'js',
    fileWithoutQuery: 'da6509a7baaff1386039.js',
    asType: 'script'
  },
  {
    file: '834b4e9b65d7391ff800.js',
    extension: 'js',
    fileWithoutQuery: '834b4e9b65d7391ff800.js',
    asType: 'script'
  },
  {
    file: 'img/0b5b752.svg',
    extension: 'svg',
    fileWithoutQuery: 'img/0b5b752.svg',
    asType: 'image'
  },
]

Я не могу понять это. Может быть, кто-то сталкивался с такой проблемой? Как решить?

Мне пришлось написать этот текст, потому что я не мог опубликовать так много кода, и я не знаю, что еще сказать. Извините за такой обман

UPD: Репозиторий с минимальным воспроизведением https://github.com/NomNes/nuxtjs-fonts-preload-bug.git

Ответ №1:

Это ошибка в vue / nuxt. Шрифты, не включенные в файлы предварительной загрузки, если они находятся в глобальном css.

вот PR, который это исправит -> https://github.com/nuxt/nuxt.js/pull/5436

Здесь PR в vue -> https://github.com/vuejs/vue/pull/9802

1. Спасибо. Я переместил импорт шрифтов в layouts/default.vue , но ничего не изменилось. В console.log from shouldPreload также нет шрифтов

2. @NikitaUmnov затем создайте репродукцию

3. добавлено к вопросу

4. @NikitaUmnov да, извините, в макете это тоже не сработает. Та же проблема, что и с внешним css. Это будет работать только на страницах, но это не решение. Итак, мы ждем отзывов о PR в vue, и если все в порядке, PR в nuxt будет объединен и выпущен в следующем выпуске исправления после него

Ответ №2:

привет, у меня была такая же проблема, и, конечно, это было одно из предупреждений gtmetrix, поэтому после многих поисков я обнаружил, что могу поместить свой код в layouts / default.vue (название каталога может отличаться в некоторых проектах, но это файл, в котором вы можете определить свои компоненты верхнего и нижнего колонтитулов следующим образом:

 <SiteHeader />

<nuxt /> ( your content )

<SiteFooter />

любым способом в шаблоне этого default.vue вы можете просто добавить свой код, как на других сайтах:

 <template>
<div>
<link rel="preload" as="style" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" crossorigin="anonymous" onload="this.rel='stylesheet'"/>
</dive>
</template>

надеюсь, это будет полезно

Ответ №3:

Понимание того, как работает webpack

Например, при запуске nuxt start или nuxt start webpack возьмет все ваши файлы, включая изображения, scss, css, js, woff2 и т.д., И обернет каждый из них в модуль, А затем передаст их в загрузчик Webpack в виде массива модулей.

Итак, вот что происходит с вашими шрифтами в конце процесса создания пакета:

 {t.exports=n.p "fonts/860685f.woff2"}

Вы можете найти эту строку в своем <link rel="preload" href="/_nuxt/e54b54068d4c2a981747.js" as="script"> после nuxt start

Проверьте свои стили

 <style data-vue-ssr-id="17cfdfa9:0 aab9a468:0">
.nuxt-progress{position:fixed;top:0;left:0;right:0;height:2px;width:0;opacity:1;transition:width .1s,opacity .4s;background-color:#000;z-index:999999}
.nuxt-progress.nuxt-progress-notransition{transition:none}.nuxt-progress-failed{background-color:red}
 @font-face{font-family:Play;src:url(/_nuxt/fonts/860685f.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
</style>

Почему не отображается в console.log()?

Ваши шрифты загружаются в файлы вашего пакета только для рабочей среды, и во время выполнения nuxt dev они обрабатываются другим способом.

http://localhost:3000/_nuxt/app.js

 /***/ "./assets/Play.woff2":
/*!***************************!*
  !*** ./assets/Play.woff2 ***!
  ***************************/
/*! no static exports found */

Пожалуйста, свяжитесь со мной, если это не тот ответ, который вы искали, или вам нужна дополнительная информация, я приложил усилия, чтобы ответить на этот интересный вопрос. Сейчас у меня обеденный перерыв, и у меня не так много времени. :)

Ссылки

https://webpack.js.org/guides/asset-management/#loading-fonts

https://nuxtjs.org/api/configuration-render#resourcehints

Ответ №4:

у меня тоже возникла такая же проблема. вместо предварительной загрузки шрифтов я использовал внутри default.vue области стилей, теперь это работает.

 <style lang="scss">
@import url(~/assets/font);
.
.
.
</style>