通用构建优化（编译阶段）+ Vue 专属运行时优化 + React 专属运行时优化

一、编译 / 构建阶段两者通用必说不管 Vue 还是 React构建优化思路完全一样减小体积、拆分代码、加速打包。代码压缩混淆JS 压缩terser 去掉注释、console、变量混淆CSS 压缩cssnano 合并、去重HTML、图片压缩WebP/AVIF 替换路由/组件懒加载Vue() import(/views/xxx)ReactReact.lazy(() import(./xxx))SuspenseTree Shaking 剔除无用代码用 ESM避免import *配置sideEffects不误删样式第三方库按需引入lodash-es、antd 按需拆包优化拆分 vendor、业务代码、第三方依赖避免单个 chunk 过大导致加载慢开启持久化缓存webpack cache / vite cache 让二次打包更快开启 Gzip/Brotli构建生成.gzNginx 配置启用小图使用 SVG / Iconify减少网络请求二、Vue 项目运行时性能优化专属面试官爱听核心减少不必要渲染、降低响应式开销、优化虚拟 DOM合理使用 v-if / v-show频繁切换用 v-show只渲染一次用 v-if避免 v-for 与 v-if 同节点使用先过滤再渲染减少无用遍历key 必须使用唯一值不要用 index保证 Diff 算法高效使用 computed 缓存计算结果避免模板中重复计算大数据列表使用vue-virtual-scroller虚拟列表只渲染可视区域DOM 数量骤减组件销毁时清除副作用清除定时器、事件监听、防抖节流避免内存泄漏使用v-memo缓存子树Vue3依赖不变时直接跳过渲染大数据量使用shallowRef / shallowReactive关闭深层响应式大幅提升性能keep-alive 合理缓存页面配合 include/exclude 避免缓存过多组件图片懒加载、懒渲染组件使用IntersectionObserver实现三、React 项目运行时性能优化专属必考核心阻止不必要重渲染、减少组件 diff、缓存值与函数使用 React.memo 缓存组件防止父组件渲染导致子组件无脑重渲染使用 useMemo 缓存计算值避免每次渲染都重新计算使用 useCallback 缓存函数引用传给 memo 子组件时不触发重渲染key 同样不要用 index保证列表 Diff 稳定高效虚拟列表 react-window / react-virtualized长列表必备合理使用 useMemo 替代 JSX 内联对象/样式避免每次渲染生成新对象导致子组件重渲染使用 Suspense lazy 做组件懒加载避免在 render 中创建新函数、新对象会导致引用变化触发重复渲染状态下放 / 组件拆分把变化频繁的状态拆成小组件避免大面积渲染使用 useTransition / useDeferredValueReact18降低非紧急更新优先级避免阻塞渲染四、面试最漂亮的总结句直接背构建阶段压缩、拆包、tree shaking、懒加载、减小体积让包更小加载更快。Vue 运行时利用响应式优势减少不必要渲染用 computed、v-memo、虚拟列表优化。React 运行时用 memo/useMemo/useCallback 阻止重复渲染拆分组件优化 Diff 过程。