Nuxt.js - 生产环境中的字体预加载

5

在开发过程中一切都很正常——预加载会有字体、图片和脚本。但当我构建生产环境时,字体没有被预加载。除了字体以外,其他都有预加载。

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

在开发环境下输出 (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'
  },
]

我想不出来该怎么办。也许有人遇到过这样的问题?如何决定呢?


我不得不写这篇文字,因为我不能公开太多的代码,也不知道还能说什么。对于这种欺骗行为,我感到非常抱歉。


更新:最小可复现示例的存储库 https://github.com/NomNes/nuxtjs-fonts-preload-bug.git


从全局 CSS 中调用字体?那么它就不会在预加载文件中。尝试将您的字体移动到布局的内联样式中。 - Aldarund
4个回答

8

谢谢。我已将字体导入移至layouts/default.vue,但没有任何变化。在shouldPreloadconsole.log中也没有字体。 - Nikita Umnov
@NikitaUmnov 创建复现。 - Aldarund
added to the question - Nikita Umnov
@NikitaUmnov 是的,抱歉,在布局中它也不起作用。与外部CSS一样的问题。它只能在页面中工作,但这不是一个解决方案。因此,我们等待Vue中PR的反馈,如果一切正常,那么在下一个补丁发布后,PR将被合并并发布到nuxt中。 - Aldarund

1

嘿,我遇到了同样的问题,当然这是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>


希望这对你有所帮助。

0
我也遇到了同样的问题。不过我在default.vue的样式作用域中使用了字体,现在它可以正常工作了。
<style lang="scss">
@import url(~/assets/font);
.
.
.
</style>

0

了解webpack的工作原理

当你运行nuxt startnuxt start时,webpack将获取你的所有文件,包括图像、scss、css、js、woff2等,并将它们包装成一个模块,然后将它们作为模块数组传递到Webpack引导程序中。

因此,在捆绑过程结束时,以下是发生在你的字体文件中的情况:

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

你可以在 nuxt start 后的 <link rel="preload" href="/_nuxt/e54b54068d4c2a981747.js" as="script"> 中找到此行。
检查你的样式。
<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


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接