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

2024-01-11

我正在为 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值设置为“获取”。 我假设它与配置有关gatsby-plugin-offline或者可能gatsby-plugin-manifest.

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

有谁知道是什么原因造成的?


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

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

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

可能的解决方案

您可以检查离线插件是否采用选项defer资源下载和/或移动到<body>而不是添加到<head>将脚本链接捆绑并注入 HTML 时。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

  • 将 React 构建输出合并到单个 js 文件中

    这类似于这个问题 https stackoverflow com questions 49123097 generate single physical javascript file using create react app然而 这两
  • 在 Heroku 上配置单页面 Create-React-App

    使用 Firebase Hosting 当您部署应用程序时有人问你 https stackoverflow com questions 37667626 firebase cli configure as a single page app
  • 如何将文本插入摩纳哥编辑器?

    我的应用程序中嵌入了摩纳哥代码编辑器 如何以编程方式在特定行上插入文本 var editor monaco editor create document getElementById container value First line n
  • 安装时反应 spring 错误

    你好 我有这个问题 如果我想将react spring安装到我的react项目中 它只会弹出一堆依赖项错误和警告 我不知道该怎么办 我试图检查react spring的文档 但找不到任何东西 我在 stackoverflow 上检查了几页
  • 通过 HTML 将复杂变量传递给 javascript 的正确方法

    我试图摆脱使用 PHP 的 htmlentities 但我在这里停止了 但后来我想 我不做替换和检查特殊字符 而是只 JSON 整个对象 这提供了一个非常不受欢迎的结果 其中包含大量双引号 那么我应该怎么做呢 我应该为每个图像分配一个数字唯
  • 带标签的 Material-ui 文本字段[关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 谁能告诉我如何在material ui lib中制作带有标签的文本字段 寻找这样的东西 https github com callem
  • jqGrid如何将额外的类应用于标题列

    我想在特定列上应用一个额外的类 我知道通过在 colModel 中指定这一点对于行是可能的 但这些类仅应用于 结果行 中的列 而不应用于标题 我想要达到的是通过简单的类名隐藏较小视口的特定列 与 Twitter Bootstrap 一起使用
  • Puppeteer 错误 错误:等待选择器超时

    目前我有一个网站 其 HTML 中有此内容 我通过检查chrome开发者工具中的元素确认了这一点 div class hdp photo carousel div class photo tile photo tile large 我直观地
  • $index 中的 AngularJS 数字

    举例来说 我有以下代码 伪 div index div 结果将是 1 2 3 4 5 6 我怎样才能改变上面的代码以便打印索引 001 002 003 004 005 006 以便索引打印为 3 位数字 您可以使用过滤器轻松完成此操作 首先
  • 窗口对象没有创建它的页面附加的属性

    我用window open url target 开一个url在新选项卡 窗口中 在此之前 我在新打开的窗口对象上设置了一些属性 目的是将数据从该页面 新窗口的创建者 传递到新创建的窗口 在除 Internet Explorer 之外的所有
  • 最有用的 jQuery 原生 API 函数

    前 5 10 个最常用的 jQuery 本机 API 函数是什么 请不要建议 jQuery 函数本身 因为毫无疑问这是最常用的函数 如果可能的话 还请提供它们所涵盖的场景 提出这个问题的原因是我尝试创建一个类似 jQuery 的 API充足
  • 从右到左的语言和编程问题

    我正在创建一个网络文本编辑器 它使用我创建的新语言 如 BBcode 这种标记语言将采用阿拉伯语 但我面临这些问题 在所有 IDE 和编辑器中将英语和阿拉伯语文本混合在同一行中确实很困难 因为会发生奇怪的事情 单词和字符的顺序发生变化 使用
  • Angular Service Worker 路线

    我已经使用 Angular Service Worker 构建了一个应用程序 除了路线之外 它在离线状态下运行良好 如果我转到基本网址 应用程序加载正常 但如果我在离线状态下转到任何其他路线 则会收到离线错误 我的 ngsw manifes
  • WebRTC、getDisplayMedia() 不捕获远程流中的声音

    我有一个自己的网络应用程序 它基于peerjs库 它是一个视频会议 我正在尝试使用 MediaRecorder 进行录制 但我遇到了一个非常不愉快的情况 捕获我的桌面流的代码如下 let chooseScreen document quer
  • JavaScript 数组中的空项和未定义项有什么区别? [复制]

    这个问题在这里已经有答案了 考虑以下 JavaScript 代码 在节点 REPL 中 gt let a new Array 10 undefined gt a lt 10 empty items gt gt a map e gt 1 lt
  • 传单地图显示为灰色

    我正在启动 leaflet js快速开始 http leafletjs com examples quick start html但我的地图显示为灰色 我缺少什么吗 脚本 js var leafletMap L map leafletMap
  • Dojo require,模块加载失败时连接错误

    当我尝试加载不存在的模块时 它失败并出现 404 错误 当然 我想处理此错误 但不知道如何连接到 错误 事件 根据 Dojo 文档 我应该能够使用它的微事件 API http livedocs dojotoolkit org loader
  • RegisterClientScriptCode 在部分回发后不起作用

    以下代码行位于 SharePoint 网站的用户控件中 ScriptManager RegisterClientScriptBlock this this GetType jquery144 false ScriptManager Regi
  • 如何让JS变量在页面刷新后保留值? [复制]

    这个问题在这里已经有答案了 是否可以永久更改 JavaScript 变量 例如 如果我设置变量 X 并使其等于 1 然后按钮的 onClick 将该变量更改为 2 如何使该变量在刷新页面时保持为 2 这是可能的window localSto
  • ReactJS 无效校验和

    尝试使用 ReactJS 和 Node js 进行服务器端渲染时 我不断收到以下错误 React attempted to use reuse markup in a container but the checksum was inval

随机推荐