Vue 教程：使用 defineAsyncComponent 实现组件级代码分割与骨架屏

快速概述

在大型 Vue 应用中，首屏加载性能至关重要。使用 defineAsyncComponent 可以轻松实现组件级代码分割，按需加载组件，从而减少初始包体积，提升加载速度。同时，结合骨架屏技术，可以在异步组件加载期间展示占位内容，优化用户体验。本文适用于使用 Vue 3 和 Vite 构建的项目，读者需具备基本的 Vue 组件知识。

核心概念与原理

defineAsyncComponent 是 Vue 3 提供的一个 API，用于定义异步组件。它接受一个返回 Promise 的加载函数，Vue 会在组件需要渲染时才执行该函数，并动态加载组件代码。这种机制实现了代码分割，浏览器只在需要时下载对应组件的 JavaScript 文件。同时，defineAsyncComponent 支持配置 loadingComponent 和 errorComponent，分别用于加载中与加载失败时的展示，这为骨架屏的实现提供了官方支持。

实战步骤与代码

步骤 1：创建 Vue 3 项目

使用 Vite 创建项目，确保 Node.js 版本满足要求（^20.19.0 或 >=22.12.0）：

npm create vue@latest
cd my-project
npm install

步骤 2：定义异步组件

在 src/components 下创建 HeavyComponent.vue，然后使用 defineAsyncComponent 引入：

<script setup>
import { defineAsyncComponent } from 'vue';
const AsyncHeavy = defineAsyncComponent(() => import('./components/HeavyComponent.vue') ); </script>
<template> <AsyncHeavy /> </template>

步骤 3：添加骨架屏

创建 SkeletonLoader.vue 作为加载占位组件，然后配置 loadingComponent：

<script setup>
import { defineAsyncComponent } from 'vue';
import SkeletonLoader from './components/SkeletonLoader.vue';
const AsyncHeavy = defineAsyncComponent({ loader: () => import('./components/HeavyComponent.vue'), loadingComponent: SkeletonLoader, delay: 200, // 延迟 200ms 后显示加载组件，避免闪烁 }); </script>

步骤 4：配置错误处理（可选）

通过 errorComponent 处理加载失败：

const AsyncHeavy = defineAsyncComponent({
  loader: () => import('./components/HeavyComponent.vue'),
  loadingComponent: SkeletonLoader,
  errorComponent: ErrorComponent,
});

常见坑点与优化

• 加载闪烁：若组件加载很快，骨架屏可能一闪而过。设置 delay 属性（如 200ms）可避免闪烁。
• 路径错误：动态 import 路径必须为静态字符串，不能使用变量，否则无法正确分割代码。
• 命名导出组件：若组件使用命名导出，需在加载函数中返回 { default: ... } 结构。
• 性能优化：结合 Vue Router 的懒加载路由，进一步减少初始包体积。同时，利用 Webpack 或 Vite 的代码分割功能，确保每个异步组件独立打包。

通过以上步骤，你可以有效提升应用性能，并借助骨架屏优化加载体验。