核心是减少冗余加载、避免无效计算、控制内存占用：按需动态导入组件与路由，精准设置key和v-once/v-memo，优化图片格式与加载，第三方库按需引入，及时清理定时器与事件监听，长列表采用虚拟滚动。
核心是减少冗余加载、避免无效计算、控制内存占用。不是堆硬件，而是让每行代码、每个资源都“有事干”。
按需加载组件和路由
别让首页加载整个后台管理系统的 JS。用动态 import 拆分代码块：
- 路由级：把每个页面组件写成
const Dashboard = () => import('@/views/Dashboard.vue') - 组件级：富文本、图表、地图等重型组件也动态引入，比如
components: { Editor: () => import('@/components/Editor.vue') } - 加 webpackChunkName 注释，方便后续查缓存和加载逻辑：
() => import(/* webpackChunkName: "editor" */ '@/components/Editor.vue')
精准控制渲染和更新
Vue 的响应式不是免费的，每次数据变化都会触发追踪和比对。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 列表必须用唯一 ID 当
:key，别用索引；否则增删时容易错乱或重绘整块 - 静态内容加
v-once，比如页脚版权、帮助文档段落，渲染一次就不再监听 - Vue 3 可用
v-memo跳过子树更新，比如大表格中只在选中状态变时才刷新某列 - 复杂过滤或格式化逻辑，放进
computed而不是模板表达式或 methods，避免重复执行
管好图片和第三方资源
一张未压缩的 PNG 常常比 JS 主包还大，它拖慢的不只是下载，还有解码和绘制。
- 图片转 WebP 或 AVIF，同质量下体积小 30%~50%
- 视口外图片用懒加载（
v-lazy或原生loading="lazy"） - 小图标（≤1KB）直接转 Base64 内联，省 HTTP 请求
- 第三方库按需引入，比如只用 Element Plus 的按钮，就别引入整套样式和所有组件
避免内存持续增长
SPA 不刷新页面，但组件销毁不干净，内存会越积越多。
- 用
<keepalive></keepalive>缓存频繁切换的组件，但设:max="5"防止缓存爆炸 - 在
beforeUnmount（Vue 3）或beforeDestroy（Vue 2）里手动清除定时器、事件监听、第三方实例（如 Map、Chart） - 长列表不用普通 v-for，改用虚拟滚动（vue-virtual-scroller 或 recyclerlistview），只渲染可见区域
- 避免在 data 中存大量未使用的原始数据，用完及时置空或用
Object.freeze冻结只读结构
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
