该技能针对 Apollo Client/Server + Redis + CloudFront + S3 技术栈，提供可提前落地的 Web 性能模式，核心原则为：先测量再优化、在 CDN→API→数据库→内存各层做缓存、最小化传输载荷、延迟非关键资源、用乐观 UI 提升感知性能。
主要能力与用法： 性能指标：给出 Core Web Vitals 目标，LCP < 2.5s（临界 4s）、INP < 200ms（临界 500ms）、CLS < 0.1（临界 0.25）。 Apollo 缓存：配置 InMemoryCache 的 type policies 处理分页合并与计算字段；默认使用 cache-and-network；mutation 使用乐观更新。按数据特性选择 fetch policy：静态数据用 cache-first，常变数据用 cache-and-network，需实时用 network-only，离线或已缓存用 cache-only。 Redis：采用 cache-aside 模式（查缓存→未命中→查库→回填），写入时失效，列表查询用基于标签的失效。TTL 参考：静态配置 24h+、商品目录 1h、用户会话 30m、购物车 7d、搜索结果 5m、实时数据不缓存。 CloudFront 与 S3：带哈希文件名的不可变资源缓存 365 天；API 路由不走 CDN 缓存；图片按需缩放为 WebP，懒加载并提供 2x srcSet。 打包优化：用 React.lazy 按路由拆分，重库动态导入，用 source-map-explorer 分析。体积参考：初始 JS < 100KB gzip、vendor chunk < 150KB、路由 chunk < 50KB、总初始加载 < 200KB。 React 性能：开销大的计算用 useMemo，传给 memo 子组件的回调用 useCallback，列表项组件用 memo；简单值、频繁变化值、非 memo 子组件的处理函数不必 memoize；100+ 项长列表用虚拟化。 数据库：只选所需字段，谨慎使用 include，复杂聚合用原始查询，在过滤/排序列上加复合索引，用 DataLoader 消除 N+1。
同时列出反模式与修复，并提供前端、Apollo、Redis、数据库、CDN 五部分的落地检查清单，以及何时考虑替代方案（如 Redis Pub/Sub 或 WebSockets、Bull 后台任务、S3 预签名 URL、Elasticsearch/Algolia、CloudFront Functions 或 Lambda@Edge）。
限制：资料未提供具体安装命令、许可、收费与平台支持信息，实施细节需参考其 assets/caching-patterns.md 与 assets/optimization-patterns.md。