框架与工程化实践
梳理 Vue / React 常见优化、构建与打包，以及首屏相关的 SSR/预渲染 提要。
1. Vue 常见优化（示例方向）
| 点 | 做法 |
|---|---|
| 列表渲染 | 稳定 key，避免用索引充当唯一 key（数据重排时复用错乱） |
| 条件展示 | 频繁切换用 v-show，一次性切换用 v-if |
| 大组件 | 异步组件、defineAsyncComponent |
| 计算属性 | 派生数据用 computed，避免模板内重算 |
| 列表大数据 | 虚拟滚动、分页 |
2. React 常见优化（示例方向）
| 点 | 做法 |
|---|---|
| 减少无效渲染 | React.memo、useMemo、useCallback（避免无脑包裹） |
| 列表 | 稳定 key；虚拟列表 |
| 代码分割 | React.lazy + Suspense |
| 状态粒度 | 避免过大 Context 导致大范围刷新 |
3. 构建与工程化
- 分析体积：
rollup-plugin-visualizer、Webpack Bundle Analyzer。 - 拆包策略：vendor / common / async chunk，避免单文件过大。
- Vite vs Webpack：开发态 Vite 依赖原生 ESM 冷启动快；生产仍需 Rollup 打包与压缩。
- 第三方库：优先 tree-shakeable 包；必要时 按需加载 CDN 或 异步模块。
4. SSR / 预渲染 / SSG（提要）
- SSR：请求时生成 HTML，首屏快、SEO 友好，服务端成本与缓存要考虑。
- SSG：构建时生成静态 HTML，适合内容稳定页面。
- 预渲染：构建时对部分路由产出 HTML，介于 CSR 与全量 SSG 之间。
选型见 前端架构 文档中的服务端渲染专题。
小结
框架层优化：少渲染、少重复计算、列表可控、大包可拆。工程层：可度量、可分析、再下刀。