Nuxt 预加载优化完整指南：5 步把首屏跳转时间压到 1.5 秒内

Nuxt 预加载优化完整指南：5 步把首屏跳转时间压到 1.5 秒内

【免费下载链接】nuxtthe full-stack Vue framework项目地址: https://gitcode.com/GitHub_Trending/nu/nuxt

你的 Nuxt 应用从首页点进详情页，用户平均要等 1.8 秒才看到新页面内容，其中近 400 毫秒纯粹花在"发现目标路由的 JS 还没下载"上。Nuxt 是 Vue 全家桶式的全栈框架，内置了链接预取、图片优化与按需加载三类资源预加载机制，但默认配置往往只解决了一半问题。读完本文，你将拿到一套可照抄的预加载配置与一份验收清单。

用 nuxi analyze 先量化首屏指标

原则很简单：没有基线就没有优化，所有改动都要对照数字说话。Nuxt 提供nuxi analyze命令生成生产包体积的可视化报告，配合 Chrome DevTools 的 Performance 面板即可建立基线。

# 生成 bundle 分析报告 npx nuxi analyze

报告里出现的大色块就是优化候选：体积大的独立块适合懒加载，包含多个库的大块适合按需引入。官方文档：docs/3.guide/2.best-practices/performance.md

官方分析命令文档：docs/4.api/4.commands/README.md

把首次测量结果记入下表，作为后续所有改动的对照基准（无实测值时，典型区间供参考）：

预加载触发时机怎么配：visibility、interaction 与关闭

<NuxtLink>默认在链接进入视口时预取目标路由的 JS，官方文档：docs/4.api/1.components/4.nuxt-link.md。触发时机由prefetchOn控制，三种模式各有代价。

基础用法与全局配置各一段：

<template> <NuxtLink to="/about" prefetch-on="visibility">关于我们</NuxtLink> <NuxtLink to="/feed" prefetch-on="interaction">信息流</NuxtLink> <NuxtLink to="/pay" no-prefetch>开通会员</NuxtLink> </template>

export default defineNuxtConfig({ experimental: { defaults: { nuxtLink: { prefetch: true, prefetchOn: { interaction: true, visibility: false }, }, }, }, })

改完会发生什么：弱网环境下 Nuxt 内置的连接检测会自动跳过预取（saveData开启或 2G 网络），点击已预取链接的跳转耗时从典型 800 ms 降到 100~300 ms。注意不要同时开启visibility和interaction，同一资源会被重复触发预取。

图片资源层策略：格式自动转换与 eager/lazy 划分

图片常占首屏传输量的 60% 以上，<NuxtImg>与<NuxtPicture>由 Nuxt Image 模块提供，负责按视口尺寸裁剪与 WebP/AVIF 格式转换，官方文档：docs/4.api/1.components/9.nuxt-img.md。

<NuxtImg src="/hero.jpg" format="webp" width="1200" height="400" loading="eager" :preload="{ fetchPriority: 'high' }" /> <NuxtImg src="/post-thumb.jpg" format="webp" width="400" height="300" loading="lazy" fetchpriority="low" />

首屏关键图用eager加高优先级预取，配合width/height锁定布局避免 CLS；首屏以下的图一律lazy。按上述划分后，首屏图片传输量典型降幅在 30%~60%（原图 400 KB 的横幅经 WebP 转换后常见 60~100 KB），LCP 相应缩短 0.5~1.5 s。

代码层分割：路由分包与组件懒加载的判断标准

Nuxt 默认按路由分包，页面 JS 天然隔离；真正要手动决策的是路由内部的大型组件。判断标准只有一条：该组件的 JS 是否阻塞用户首次交互，且不阻塞时其体积是否超过 20 KB (gzip)。两个都占才值得拆。

<template> <Article /> <LazyComments v-if="articleLoaded" /> </template>

<!-- 使用懒水合：DOM 立即渲染，脚本到视口才执行 -->

对"看得见但不必立刻可交互"的组件，用Lazy前缀加延迟水合策略比纯条件渲染更稳：hydrate-on-visible滚动到才激活，hydrate-on-idle等浏览器空闲，hydrate-after按毫秒延迟，官方文档：docs/2.directory-structure/1.app/1.components.md。

<template> <LazyPromoBanner hydrate-on-visible /> <LazyDataChart hydrate-on-idle /> </template>

改完会发生什么：首屏主 chunk 典型减少 30%~50% 的 gzip 体积（常见 40~120 KB），交互时间（TTI）缩短 200~600 ms。反过来，如果组件首屏就可见且体积低于 20 KB，不要拆——额外的异步请求会得不偿失。

反模式诊断：症状、判定与修复三列清单

预加载做过头和做不足一样伤性能。⚠️ 下表按"症状 / 判定 / 修复"给出常见反模式，逐项过一遍即可验收：

全部修复后的前后对比（典型区间，按上述 5 步完整执行）：

交付清单

• 已用nuxi analyze+ DevTools 记录优化前基线表
• 全局prefetchOn已按"高频入口 visibility / 长列表 interaction"划分
• 外链、付费墙页面已加no-prefetch或external
• LCP 图片已改eager+ 高优先级预取，其余图片lazy
• 超过 20 KB 且非首屏阻塞的组件已Lazy化并选定水合策略

官方性能优化指南：docs/3.guide/2.best-practices/performance.md

【免费下载链接】nuxtthe full-stack Vue framework项目地址: https://gitcode.com/GitHub_Trending/nu/nuxt