Nuxt•3w ago

modulepreload 和 prefetch 能够迁移到 body 最下面么？

2 Replies

Hi @xuxchao. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- 根据现有的知识来源，Nuxt 在生成 HTML 时，<link rel="modulepreload"> 和 <link rel="prefetch"> 这类资源预加载标签会被自动插入到 <head> 部分，而不是 <body> 底部。这是因为浏览器规范和最佳实践建议将这些资源提示放在 <head>，以便浏览器能尽早发现和处理关键资源，从而提升页面性能。在 Nuxt 的相关 PR 和文档示例中，所有 <link rel="modulepreload"> 和 <link rel="prefetch"> 标签都出现在 <head> 内。例如：

<!DOCTYPE html><html><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.HCIDZTxN.js">
<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.fb9U4sbQ.js">
...
</head><body>...</body></html>

<!DOCTYPE html><html><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.HCIDZTxN.js">
<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.fb9U4sbQ.js">
...
</head><body>...</body></html>

perf(nuxt): ensure renderHTMLDocument return more compact result
feat(nuxt): enable renderSSRHeadOptions configuration for unhead 目前没有任何官方配置或 API 支持将这些 <link rel="modulepreload"> 或 <link rel="prefetch"> 标签迁移到 <body> 底部。即使通过自定义脚本强行插入到 <body>，也不符合浏览器的解析和预加载机制，可能导致预加载失效或性能下降。因此，modulepreload 和 prefetch 不能迁移到 body 最下面，且不建议这样做。它们应当保留在 <head>，以确保浏览器能正确处理资源预加载。 ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@491180576943112192> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

modulepreload 和 prefetch 能够迁移到 body 最下面么？

Did you find this page helpful?