Question

在开发过程中一切都很好-预加载具有字体，图像，脚本。但是当我构建产品时，字体不会落入预加载。除了字体外，什么都有。

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'
  },
]

我不知道。也许有人遇到过这样的问题？如何决定？

我不得不写这篇文章，因为我无法发布太多代码，而且我不知道该说些什么。抱歉作弊

UPD：回购且复制极少https://github.com/NomNes/nuxtjs-fonts-preload-bug.git

Answer 1

多数民众赞成在vue / nuxt中的错误。如果字体在全局CSS中，则不包含在preloadFiles中的字体。

这是将对其进行修复的PR-> https://github.com/nuxt/nuxt.js/pull/5436

此处显示公关-> https://github.com/vuejs/vue/pull/9802

Answer 2

了解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

Answer 3

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

希望对你有帮助

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

3 个答案: