Nuxt 资源预加载提速实战让页面在用户点击前就位【免费下载链接】nuxtthe full-stack Vue framework项目地址: https://gitcode.com/GitHub_Trending/nu/nuxt用 Nuxt 做项目一段时间后总躲不过三个场景移动端首屏要等好几秒点击导航切路由时闪一下白屏首页大图把 LCP 拖得很难看。这些问题的共性不是资源太大而是资源到得太晚。Nuxt 内置的预加载体系正好解决它——NuxtLink自动预取、按路由的代码分割、Lazy前缀延迟加载、懒水合lazy hydration、NuxtImg图片优先级加载。思路很简单在用户需要之前把资源备齐同时别把带宽浪费在没人点的链接上。NuxtLink 默认就在预取三种时机怎么选打开 packages/nuxt/src/app/components/nuxt-link.ts 能看到NuxtLink对内部链接默认开启预取用 IntersectionObserver 盯着链接元素一旦进入视口就通过requestIdleCallback在浏览器空闲时拉取目标路由的组件代码并在断网或 2G 弱网isSlowConnection()下自动跳过。也就是说你什么都不写首屏附近的链接就已经在后台准备资源了。想改变触发时机用prefetchOn和no-prefetch两个属性NuxtLink to/about关于我们/NuxtLink !-- 默认进入视口即预取 -- NuxtLink to/pricing prefetch-oninteraction报价/NuxtLink !-- 悬停/聚焦才预取 -- NuxtLink to/legacy no-prefetch旧版入口/NuxtLink !-- 彻底关掉 --这段代码解决什么时候开始下载的问题visibility是默认档用户还没点资源已经就位interaction把成本压到最低但点击后需要等一小会儿no-prefetch则把带宽完全让给关键资源。策略触发点适合的场景visibility默认链接滚入视口空闲时执行首屏导航、高概率被点击的入口interaction鼠标悬停或键盘聚焦长列表、低点击率链接、流量敏感no-prefetch不预取低版本入口、调试期、弱网兜底时机只是单链接的局部决策站点流量结构固定的话更省事的做法是全局统一调一次。在 nuxt.config.ts 里批量调 NuxtLink 的预取策略单条链接上改属性太碎。experimental.defaults.nuxtLink可以一次性设定全站的预取行为写法见 官方 NuxtLink 文档// nuxt.config.ts export default defineNuxtConfig({ experimental: { defaults: { nuxtLink: { prefetch: true, prefetchOn: { interaction: true, visibility: false }, }, }, }, })这一段把全站链接从见一面就预取改成要点了才预取移动端流量开销能明显降下来而用户真实要点击的那一次预取依然来得及。如果后续想更激进文档里还有experimental.crossOriginPrefetch基于 Speculation Rules API可以预取跨域路由。预取的是哪个路由取决于 Nuxt 的路由分割这里有个常被忽视的并发上限。路由级代码分割预取的实际边界每个页面文件在构建后对应独立的 JS chunkNuxtLink的预取拉取的正是目标路由的这些组件代码——这也是为什么预取能换来到达速度。但 Nuxt 不会无脑并发下载在 packages/nuxt/src/app/composables/preload.ts 的preloadRouteComponents里同一时刻最多 4 个路由在预加载超出的请求会先排队等前面的解析完再继续。所以你在首页滚过几十个链接也不会触发预取风暴。页面级元信息可以写在definePageMeta里布局、中间件、keepalive都在这里声明参考 pages 文档。页面之外的组件可以用更轻的两级手段削首屏体积template LazyChartPanel hydrate-on-visible / /templateLazy前缀让组件代码只在真正渲染时才动态导入官方 性能文档 推荐的标准写法hydrate-on-visible则进一步推迟水合等组件滚进视口才变成可交互的。弹窗里的富文本编辑器、报表图表都该这么处理——它们可能几分钟才出现一次却常被塞进首屏 bundle。JS 体积降下来后下一个大头通常是图。首屏图片NuxtImg 的优先级加载与 WebP 转换NuxtImg是原生img的替代品按width/height自动裁剪尺寸转换 WebP/AVIF支持响应式sizes和原生懒加载需要先装 Image 模块npx nuxt module add image详见 NuxtImg 文档。图片提速的核心是给 LCP 图片插队让其余图片靠边站NuxtImg src/hero-banner.jpg :preload{ fetchPriority: high } loadingeager formatwebp width1200 height400 /preload会生成fetchpriorityhigh的预加载声明让这张图在 CSS、字体之前就开始下载——它直接决定 LCP。配合formatwebp同样内容的体积通常能再降 25%~35%。首屏以下的图片不要碰preload一律交给loadinglazy。到这里链接、组件、图片三条线都调完了最后收掉几个最容易翻车的点。预加载的三个坑一次说清 ⚠️custom插槽不自动挂预取逻辑用v-slot自定义渲染时prefetch、prefetchOn都失效必须在pointerenter/focus上手动调用插槽返回的prefetch()配合shouldPrefetch(interaction)判断详见 NuxtLink 文档的 Custom Prefetch Triggers 一节。别把visibility和interaction同时打开官方文档原话是 That you probably dont want both enabled!两个触发器会让同一资源在不同条件下被预取两次。外部链接和target_blank本来就不参与预取代码里写死了不用配但如果你发现某个内部链接没被预取先检查它是不是被no-prefetch或:prefetchfalse关掉了。改完怎么验证两件事就够Chrome DevTools 的 Network 面板里滚到链接附近时观察_nuxt下的 js 是否提前出现再跑一次nuxi analyze看 bundle 可视化里有没有异常的大块有就按前面的Lazy前缀方案拆掉。动手清单首屏导航保留默认visibility预取长列表链接统一改成prefetch-oninteraction低频入口加no-prefetch弹窗、图表类重组件加上Lazy前缀纯展示型服务端组件加hydrate-on-visible给 LCP 图加:preload{ fetchPriority: high }与formatwebp其余图片loadinglazy【免费下载链接】nuxtthe full-stack Vue framework项目地址: https://gitcode.com/GitHub_Trending/nu/nuxt创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Nuxt 资源预加载提速实战：让页面在用户点击前就位
Nuxt 资源预加载提速实战让页面在用户点击前就位【免费下载链接】nuxtthe full-stack Vue framework项目地址: https://gitcode.com/GitHub_Trending/nu/nuxt用 Nuxt 做项目一段时间后总躲不过三个场景移动端首屏要等好几秒点击导航切路由时闪一下白屏首页大图把 LCP 拖得很难看。这些问题的共性不是资源太大而是资源到得太晚。Nuxt 内置的预加载体系正好解决它——NuxtLink自动预取、按路由的代码分割、Lazy前缀延迟加载、懒水合lazy hydration、NuxtImg图片优先级加载。思路很简单在用户需要之前把资源备齐同时别把带宽浪费在没人点的链接上。NuxtLink 默认就在预取三种时机怎么选打开 packages/nuxt/src/app/components/nuxt-link.ts 能看到NuxtLink对内部链接默认开启预取用 IntersectionObserver 盯着链接元素一旦进入视口就通过requestIdleCallback在浏览器空闲时拉取目标路由的组件代码并在断网或 2G 弱网isSlowConnection()下自动跳过。也就是说你什么都不写首屏附近的链接就已经在后台准备资源了。想改变触发时机用prefetchOn和no-prefetch两个属性NuxtLink to/about关于我们/NuxtLink !-- 默认进入视口即预取 -- NuxtLink to/pricing prefetch-oninteraction报价/NuxtLink !-- 悬停/聚焦才预取 -- NuxtLink to/legacy no-prefetch旧版入口/NuxtLink !-- 彻底关掉 --这段代码解决什么时候开始下载的问题visibility是默认档用户还没点资源已经就位interaction把成本压到最低但点击后需要等一小会儿no-prefetch则把带宽完全让给关键资源。策略触发点适合的场景visibility默认链接滚入视口空闲时执行首屏导航、高概率被点击的入口interaction鼠标悬停或键盘聚焦长列表、低点击率链接、流量敏感no-prefetch不预取低版本入口、调试期、弱网兜底时机只是单链接的局部决策站点流量结构固定的话更省事的做法是全局统一调一次。在 nuxt.config.ts 里批量调 NuxtLink 的预取策略单条链接上改属性太碎。experimental.defaults.nuxtLink可以一次性设定全站的预取行为写法见 官方 NuxtLink 文档// nuxt.config.ts export default defineNuxtConfig({ experimental: { defaults: { nuxtLink: { prefetch: true, prefetchOn: { interaction: true, visibility: false }, }, }, }, })这一段把全站链接从见一面就预取改成要点了才预取移动端流量开销能明显降下来而用户真实要点击的那一次预取依然来得及。如果后续想更激进文档里还有experimental.crossOriginPrefetch基于 Speculation Rules API可以预取跨域路由。预取的是哪个路由取决于 Nuxt 的路由分割这里有个常被忽视的并发上限。路由级代码分割预取的实际边界每个页面文件在构建后对应独立的 JS chunkNuxtLink的预取拉取的正是目标路由的这些组件代码——这也是为什么预取能换来到达速度。但 Nuxt 不会无脑并发下载在 packages/nuxt/src/app/composables/preload.ts 的preloadRouteComponents里同一时刻最多 4 个路由在预加载超出的请求会先排队等前面的解析完再继续。所以你在首页滚过几十个链接也不会触发预取风暴。页面级元信息可以写在definePageMeta里布局、中间件、keepalive都在这里声明参考 pages 文档。页面之外的组件可以用更轻的两级手段削首屏体积template LazyChartPanel hydrate-on-visible / /templateLazy前缀让组件代码只在真正渲染时才动态导入官方 性能文档 推荐的标准写法hydrate-on-visible则进一步推迟水合等组件滚进视口才变成可交互的。弹窗里的富文本编辑器、报表图表都该这么处理——它们可能几分钟才出现一次却常被塞进首屏 bundle。JS 体积降下来后下一个大头通常是图。首屏图片NuxtImg 的优先级加载与 WebP 转换NuxtImg是原生img的替代品按width/height自动裁剪尺寸转换 WebP/AVIF支持响应式sizes和原生懒加载需要先装 Image 模块npx nuxt module add image详见 NuxtImg 文档。图片提速的核心是给 LCP 图片插队让其余图片靠边站NuxtImg src/hero-banner.jpg :preload{ fetchPriority: high } loadingeager formatwebp width1200 height400 /preload会生成fetchpriorityhigh的预加载声明让这张图在 CSS、字体之前就开始下载——它直接决定 LCP。配合formatwebp同样内容的体积通常能再降 25%~35%。首屏以下的图片不要碰preload一律交给loadinglazy。到这里链接、组件、图片三条线都调完了最后收掉几个最容易翻车的点。预加载的三个坑一次说清 ⚠️custom插槽不自动挂预取逻辑用v-slot自定义渲染时prefetch、prefetchOn都失效必须在pointerenter/focus上手动调用插槽返回的prefetch()配合shouldPrefetch(interaction)判断详见 NuxtLink 文档的 Custom Prefetch Triggers 一节。别把visibility和interaction同时打开官方文档原话是 That you probably dont want both enabled!两个触发器会让同一资源在不同条件下被预取两次。外部链接和target_blank本来就不参与预取代码里写死了不用配但如果你发现某个内部链接没被预取先检查它是不是被no-prefetch或:prefetchfalse关掉了。改完怎么验证两件事就够Chrome DevTools 的 Network 面板里滚到链接附近时观察_nuxt下的 js 是否提前出现再跑一次nuxi analyze看 bundle 可视化里有没有异常的大块有就按前面的Lazy前缀方案拆掉。动手清单首屏导航保留默认visibility预取长列表链接统一改成prefetch-oninteraction低频入口加no-prefetch弹窗、图表类重组件加上Lazy前缀纯展示型服务端组件加hydrate-on-visible给 LCP 图加:preload{ fetchPriority: high }与formatwebp其余图片loadinglazy【免费下载链接】nuxtthe full-stack Vue framework项目地址: https://gitcode.com/GitHub_Trending/nu/nuxt创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考