Vue 3性能优化需围绕“加载快、渲染稳、交互顺”系统性做减法：路由与组件按需加载，渲染避开复杂表达式与深层响应式，资源瘦身并CDN分发，长列表用虚拟滚动与markRaw跳过响应式。
Vue 3 项目性能优化不是堆砌技巧，而是围绕“加载快、渲染稳、交互顺”三个真实用户感知目标，系统性地做减法和精准控制。关键不在全量启用所有方案，而在识别瓶颈后针对性落地——比如首屏慢就优先路由懒加载+CDN；滚动卡顿就上虚拟滚动+浅层响应式；频繁重绘就查 computed 缓存与 v-if/v-show 误用。
路由与组件：按需加载，拒绝全量打包
绝大多数首屏慢的根源是页面一打开就把所有路由和弹窗组件全塞进主包。解决方法非常直接：
- 所有路由级组件必须用 动态 import() 写法：
component: () => import('@/views/User.vue')，Vite 和 Webpack 均原生支持，无需插件； - 非首屏组件（如详情弹窗、复杂图表、侧边工具栏）用 defineAsyncComponent 包裹，配合 Suspense 控制加载态；
- 关联性强的页面（如用户管理下的列表、编辑、日志）可通过
/* webpackChunkName: "user" */打包到同一 chunk，减少 HTTP 请求数。
渲染效率：减少无效 Diff 与 DOM 操作
Vue 3 的 Diff 已很高效，但模板写法仍会拖慢它。重点避开三类低效操作：
- 模板中禁用复杂表达式，如
{{ user.name + '-' + formatDate(user.time) }}—— 改用 computed 缓存结果，只在依赖变化时重新计算； - 大型表格或配置数据（1000+ 行、嵌套深），改用 shallowRef 或 shallowReactive，避免 Proxy 递归追踪无变更字段；
- 频繁切换显示/隐藏的模块，用 v-show 替代 v-if，避免反复创建销毁 DOM 节点。
资源与构建：瘦身 + 加速分发
体积和加载路径决定首屏天花板：
- UI 库（如 Element Plus）必须按需引入，推荐 unplugin-vue-components 自动解析，不打包未使用的组件；
- 核心依赖（vue、vue-router、pinia）通过 CDN 外部化：在
vite.config.ts中配置external和globals，并在index.html中用 CDN 链接引入； - 图片统一转 WebP，静态资源加 hash 并托管至 CDN，确保缓存长期有效且边缘节点就近响应。
长列表与交互：跳过渲染瓶颈
当数据量超过几百条，传统 v-for 就会明显卡顿：
- 使用 虚拟滚动组件（如 vue-virtual-scroller 或 recycler-scroller），只渲染可视区域内的 DOM，DOM 节点数从数千降至几十；
- 对纯展示型大数据（如日志列表、静态配置），用 markRaw 包裹原始数据，彻底跳过响应式系统追踪；
- 高频输入或按钮点击，加 防抖 或 节流，避免短时间内触发多次状态更新与渲染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
