如何修复控制台警告“资源...已使用链接预加载进行预加载，但在窗口加载事件后几秒钟内未使用”？

问题描述 投票：0回答：3

我正在为 PWA 开发 gatsby 主题/启动器，但我似乎无法摆脱以下控制台警告：

The resource https://davidde.github.io/gatsby-starter-simpwa/page-data/offline-plugin-app-shell-fallback/page-data.json
was preloaded using link preload but not used within a few seconds from the window's load event.
Please make sure it has an appropriate `as` value and it is preloaded intentionally.

首次加载时一切正常；服务工作者按照应有的方式进行注册，并且没有任何警告。但是，重新加载后，会出现此警告。这是没有意义的，因为 

as
值设置为“fetch”。 我假设它与 
gatsby-plugin-offline
或者 
gatsby-plugin-manifest
的配置有关。

源代码位于https://github.com/davidde/gatsby-starter-simpwa，
它已部署到 https://davidde.github.io/gatsby-starter-simpwa/。

有人知道是什么原因造成的吗？

javascript reactjs progressive-web-apps gatsby
3个回答
2
投票

该警告仅意味着该资源正在以更高的优先级下载，但其使用的紧迫性与下载时的紧迫程度不同。

浏览器看到带有 

rel=preload
的链接时的期望是该资源对于页面正确呈现至关重要。但如果情况并非如此，它会警告您可能会推迟下载，以便它可以执行比下载这个不那么重要的资源更重要的其他操作（例如下载 CSS 或渲染布局）。更多这里-

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload

可能的解决方案

您可以检查离线插件是否采用 

defer
资源下载选项和/或将其移动到 
<body>
，而不是在将脚本链接捆绑并注入到 HTML 中时添加到 
<head>
。

0
投票

迟到了，但就其价值而言 - 对我来说，这是由于自动应用的版本参数：

<!-- preloading without version parameter -->
<link rel="preload" href="https://example.com/preload-style.css" as="style"/>

<!-- async loading screen styles including automatically set version parameter -->
<link rel="stylesheet" href="https://example.com/preload-style.css?ver=123" media="print" onload="this.media='all'; this.onload=null;" />

删除版本参数（这些样式不需要该参数）就消除了警告。 将相同的版本参数应用于预加载

href
似乎也同样有效。从我的测试看来，预加载已经起作用，如果不是完全相同的字符串，只会触发警告。 在 Firefox 和 Chrome 中验证。

-1
投票

在React应用程序的公共文件夹中，有一个index.html，将此行粘贴到index.html中，然后再次尝试运行React应用程序

<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.