扫描二维码关注或者微信搜一搜：编程智域 前端至全栈交流与成长

使用 prefetchComponents 进行组件预取

在 Nuxt.js 中，prefetchComponents 是一个工具，可以帮助你在应用程序运行时提前下载和缓存组件，以提高用户体验。当你知道某些组件可能会被用户使用时，可以通过预取这些组件来减少延迟和提升加载速度。

什么是 prefetchComponents？

prefetchComponents 是 Nuxt.js 提供的一个函数，用于手动预取在应用中全局注册的组件。这意味着在用户需要某个组件之前，它已经在后台被下载和缓存好，从而避免用户在需要组件时等待下载。

注意：prefetchComponents 仅在客户端生效，服务器端渲染期间不会有任何效果。

预取 vs. 预加载

prefetchComponents 与 preloadComponents 功能类似，但有些区别：

• 预取（Prefetch）：在后台下载并缓存组件，当用户真正需要时，可以更快地加载。
• 预加载（Preload）：更主动地加载组件，以确保组件在用户需要时已准备好。

如何使用 prefetchComponents

基本用法

你可以通过 prefetchComponents 预取单个组件或多个组件。组件名必须使用帕斯卡命名法（PascalCase）。

预取单个组件

1

await prefetchComponents('MyGlobalComponent');

预取多个组件

1

await prefetchComponents(['MyGlobalComponent1', 'MyGlobalComponent2']);

示例：组件预取

下面是一个实际示例，演示如何在 Nuxt.js 中使用 prefetchComponents 预取组件。

1. 创建组件

首先，创建两个简单的组件，在 components 目录中。

components/MyGlobalComponent1.vue

1
2
3
4
5
6
7
8
9
10

<template>
  <div>
    <h1>Component 1</h1>
  </div>
</template>

<script setup>
  console.log('MyGlobalComponent1 loaded.');
</script>

components/MyGlobalComponent2.vue

1
2
3
4
5
6
7
8
9
10

<template>
  <div>
    <h1>Component 2</h1>
  </div>
</template>

<script setup>
  console.log('MyGlobalComponent2 loaded.');
</script>

2. 使用 prefetchComponents

在一个页面或插件中，使用 prefetchComponents 来预取这些组件。例如，在 pages/index.vue 页面中：

pages/index.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

<script setup>
  import {onMounted} from 'vue';

  onMounted(async () => {
    await prefetchComponents(['MyGlobalComponent1', 'MyGlobalComponent2']);
  });
</script>

3. 配置 Nuxt.js

确保你的组件在 Nuxt.js 中被全局注册。在 nuxt.config.ts 中：

nuxt.config.ts

1
2
3

export default defineNuxtConfig({
    components: true, // 确保组件自动导入
});

4. 运行项目

启动你的 Nuxt.js 应用：

1

npm run dev

验证预取

打开浏览器并检查开发者工具的网络面板。在加载页面时，你应该看到 MyGlobalComponent1 和 MyGlobalComponent2
的相关网络请求已经被触发。这样，组件将会在用户实际请求之前被预取并缓存。

总结

prefetchComponents 是一个强大的工具，可以提升 Nuxt.js
应用的用户体验，通过提前下载和缓存组件减少延迟。在用户需要使用组件时，它们会更快地加载。通过合理使用 prefetchComponents
，你可以优化你的应用，使其在用户交互时更加流畅。

余下文章内容请点击跳转至 个人博客页面 或者 扫码关注或者微信搜一搜：编程智域 前端至全栈交流与成长，阅读完整的文章：

往期文章归档：

• 使用 onNuxtReady 进行异步初始化 | cmdragon’s Blog
• 使用 onBeforeRouteUpdate 组合式函数提升应用的用户体验 | cmdragon’s Blog
• 使用 onBeforeRouteLeave 组合式函数提升应用的用户体验 | cmdragon’s Blog
• 使用 navigateTo 实现灵活的路由导航 | cmdragon’s Blog
• 使用 Nuxt 3 的 defineRouteRules 进行页面级别的混合渲染 | cmdragon’s Blog
• 掌握 Nuxt 3 的页面元数据：使用 definePageMeta 进行自定义配置 | cmdragon’s Blog
• 使用 defineNuxtRouteMiddleware 创建路由中间件 | cmdragon’s Blog
• [使用 defineNuxtComponent`定义 Vue 组件 | cmdragon’s Blog](https://blog.cmdragon.cn/posts/df9c2cf37c29/)
• 使用 createError 创建错误对象的详细指南 | cmdragon’s Blog
• 清除 Nuxt 状态缓存：clearNuxtState | cmdragon’s Blog
• 清除 Nuxt 数据缓存：clearNuxtData | cmdragon’s Blog
• 使用 clearError 清除已处理的错误 | cmdragon’s Blog
• 使用 addRouteMiddleware 动态添加中间 | cmdragon’s Blog
• 使用 abortNavigation 阻止导航 | cmdragon’s Blog
• 使用 $fetch 进行 HTTP 请求 | cmdragon’s Blog
• 使用 useState 管理响应式状态 | cmdragon’s Blog
• 使用 useServerSeoMeta 优化您的网站 SEO | cmdragon’s Blog
• 使用 useSeoMeta 进行 SEO 配置 | cmdragon’s Blog
• Nuxt.js必读：轻松掌握运行时配置与 useRuntimeConfig | cmdragon’s Blog