标准答案
- 资源层面可以做路由懒加载、组件懒加载、依赖拆包、图片优化、预加载关键资源和移除无用依赖。
- 数据层面要避免首屏重复请求，合理使用服务端预取、缓存、骨架屏、分页和延迟加载非关键数据。
- 渲染层面要控制大列表、复杂表格、重组件和频繁变化状态的影响范围。
- 响应式层面要避免把大对象深度 reactive、把全局 store 的宽依赖直接传进大量组件，或在模板中绑定频繁变化的无关状态。
- 定位时可以结合 Devtools、Performance 面板、bundle 分析和真实设备数据，而不是只靠主观感觉。
题目解析
首屏优化不是只做懒加载。懒加载解决资源加载时机，不能自动解决重复请求、大列表渲染和响应式依赖过宽。
Vue 项目常见无意义渲染来自父组件状态过大，子组件被迫跟着更新；也可能来自 key 不稳定导致整片重建。
性能优化要先测量，再处理瓶颈。没有指标的优化容易把代码变复杂，却没有用户可感知收益。
代码示例
下面的拆分方式能让低频重组件延迟加载。
Vue
<script setup lang="ts">
const HeavyEditor = defineAsyncComponent(() => import('./HeavyEditor.vue'))
const showEditor = ref(false)
</script>
<template>
<button @click="showEditor = true">编辑</button>
<HeavyEditor v-if="showEditor" />
</template>常见误区
- 没有性能数据就先重构组件或换框架。
- 只做路由懒加载，不处理首屏重复请求和大列表渲染。
- 把所有状态放进一个全局 store，导致很多组件订阅过宽。