标准答案
- 路由懒加载通常用动态 import 拆分页面级 chunk，用户进入对应路由时再加载页面组件。
- defineAsyncComponent 适合延迟加载较重的局部组件，例如图表、富文本编辑器、复杂弹窗。
- 异步组件可以配置 loading、error、delay、timeout 等状态，提升加载失败和慢网络下的体验。
- Suspense 用来协调组件树里的异步 setup 或异步组件，让父级可以统一展示 fallback。
- 拆包不是越碎越好。要结合首屏体积、复用频率、网络并发和缓存命中率决定拆分粒度。
题目解析
这道题要把“加载边界”和“展示边界”分开讲：路由懒加载解决页面进入时的包加载，Suspense 解决等待期间怎么展示。
大型后台常见做法是路由级懒加载页面，再对低频重组件做组件级懒加载。
异步组件失败时要有错误态，不能让页面空白。涉及核心流程的组件也不能盲目延迟加载。
代码示例
下面展示了页面级路由懒加载和组件级异步组件。
TypeScript
const routes = [
{
path: '/report',
component: () => import('./pages/ReportPage.vue')
}
]Vue
<script setup lang="ts">
const HeavyChart = defineAsyncComponent({
loader: () => import('./HeavyChart.vue'),
timeout: 10000
})
</script>
<template>
<Suspense>
<HeavyChart />
<template #fallback>
<div>图表加载中</div>
</template>
</Suspense>
</template>常见误区
- 把所有组件都异步化，导致请求数量过多和交互延迟变高。
- 只做动态 import，没有处理 loading、error 或 timeout 状态。
- 混淆路由懒加载和 Suspense，以为 Suspense 会自动减少首屏包体积。