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

---

一、编译 / 构建阶段（两者通用，必说）

不管 Vue 还是 React，构建优化思路完全一样：减小体积、拆分代码、加速打包。

1. 代码压缩混淆

   • JS 压缩：terser 去掉注释、console、变量混淆
   • CSS 压缩：cssnano 合并、去重
   • HTML、图片压缩，WebP/AVIF 替换

2. 路由/组件懒加载

   • Vue：() => import('@/views/xxx')
   • React：React.lazy(() => import('./xxx')) + Suspense

3. Tree Shaking 剔除无用代码

   • 用 ESM，避免 import *
   • 配置 sideEffects 不误删样式
   • 第三方库按需引入（lodash-es、antd 按需）

4. 拆包优化

   • 拆分 vendor、业务代码、第三方依赖
   • 避免单个 chunk 过大导致加载慢

5. 开启持久化缓存

   • webpack cache / vite cache 让二次打包更快

6. 开启 Gzip/Brotli

   • 构建生成 .gz，Nginx 配置启用

7. 小图使用 SVG / Iconify，减少网络请求

---

二、Vue 项目运行时性能优化（专属，面试官爱听）

核心：减少不必要渲染、降低响应式开销、优化虚拟 DOM

1. 合理使用 v-if / v-show

   • 频繁切换用 v-show
   • 只渲染一次用 v-if

2. 避免 v-for 与 v-if 同节点使用

   • 先过滤再渲染，减少无用遍历

3. key 必须使用唯一值，不要用 index

   • 保证 Diff 算法高效

4. 使用 computed 缓存计算结果

   • 避免模板中重复计算

5. 大数据列表使用 vue-virtual-scroller 虚拟列表

   • 只渲染可视区域，DOM 数量骤减

6. 组件销毁时清除副作用

   • 清除定时器、事件监听、防抖节流
   • 避免内存泄漏

7. 使用 v-memo 缓存子树（Vue3）

   • 依赖不变时直接跳过渲染

8. 大数据量使用 shallowRef / shallowReactive

   • 关闭深层响应式，大幅提升性能

9. keep-alive 合理缓存页面

   • 配合 include/exclude 避免缓存过多组件

10. 图片懒加载、懒渲染组件

    • 使用 IntersectionObserver 实现

---

三、React 项目运行时性能优化（专属，必考）

核心：阻止不必要重渲染、减少组件 diff、缓存值与函数

1. 使用 React.memo 缓存组件

   • 防止父组件渲染导致子组件无脑重渲染

2. 使用 useMemo 缓存计算值

   • 避免每次渲染都重新计算

3. 使用 useCallback 缓存函数引用

   • 传给 memo 子组件时不触发重渲染

4. key 同样不要用 index

   • 保证列表 Diff 稳定高效

5. 虚拟列表 react-window / react-virtualized

   • 长列表必备

6. 合理使用 useMemo 替代 JSX 内联对象/样式

   • 避免每次渲染生成新对象导致子组件重渲染

7. 使用 Suspense + lazy 做组件懒加载

8. 避免在 render 中创建新函数、新对象

   • 会导致引用变化，触发重复渲染

9. 状态下放 / 组件拆分

   • 把变化频繁的状态拆成小组件，避免大面积渲染

10. 使用 useTransition / useDeferredValue（React18）

    • 降低非紧急更新优先级，避免阻塞渲染

---

四、面试最漂亮的总结句（直接背）

• 构建阶段： 压缩、拆包、tree shaking、懒加载、减小体积，让包更小加载更快。
• Vue 运行时： 利用响应式优势，减少不必要渲染，用 computed、v-memo、虚拟列表优化。
• React 运行时： 用 memo/useMemo/useCallback 阻止重复渲染，拆分组件，优化 Diff 过程。