针对单页应用（SPA）首屏渲染延迟的问题，可以从哪些维度进行优化？请结合 Vue 或类似框架说明具体措施。
考察说明
考查对 SPA 首屏性能优化手段的掌握，以及能否结合具体框架落地。
回答思路
- 【回答框架 1】首屏慢的根源在于初始 HTML 空载、JS 包体过大、串行请求和渲染阻塞。优化方向分为资源加载、代码拆分、渲染策略和服务端能力四类。
- 【回答框架 2】代码层面使用路由级动态 import 实现按需加载，配合 webpack 或 Vite 的代码分割，将首屏必要代码控制在最小集合；第三方库通过 externals 或 CDN 引入，减少打包体积。
- 【回答框架 3】利用 HTTP 缓存、CDN 分发和 gzip/Brotli 压缩降低传输成本；对关键 CSS 内联，非关键资源异步加载，减少阻塞渲染的请求。
- 【回答框架 4】渲染策略上采用 SSR 或静态生成（SSG）输出首屏 HTML，或在 CSR 中配合骨架屏和关键路径接口预取，缩短白屏与可交互时间；图片使用懒加载和响应式尺寸。
- 【回答框架 5】持续监控首屏指标如 FCP、LCP，通过 Performance 面板和 Lighthouse 定位瓶颈，结合预算管理控制包体增长。
- 【关键点 1】核心是减少首屏必需资源的体积与请求数，主要手段为代码分割、异步加载和缓存。
- 【关键点 2】动态 import 路由级拆分是 Vue/React 中最直接的落地方式。
- 【关键点 3】SSR/SSG 能有效提升首屏内容可见速度，但会增加架构复杂度。
- 【关键点 4】性能优化需基于指标测量，避免盲目优化。
- 【易错点 1】将动态导入用于非路由模块可能无法正确分割，需确保 chunk 划分合理。
- 【易错点 2】过度使用 SSR 可能导致服务端压力与缓存失效问题，需权衡适用场景。
- 【易错点 3】仅压缩 JS 而不优化依赖与请求顺序，优化效果有限。