用途：为 Web 前端应用提供性能优化的实践参考，围绕打包体积、资源加载、缓存与交互指标展开。
主要能力：
- 打包分析与代码分割：使用 React lazy/Suspense 做路由级动态导入；在 vite.config.ts 中通过 rollupOptions.output.manualChunks 拆分 vendor、charts、editor 等 chunk；用 npx vite-bundle-visualizer 与 npx source-map-explorer dist/assets/*.js 分析产物组成。
- 图片优化：以 next/image 提供响应式 sizes、blur 占位与懒加载；原生 img 使用 loading="lazy"、decoding="async"、fetchpriority="low"，并显式设置 width/height；LCP 图片用 link rel="preload" as="image" fetchpriority="high" 预加载。
- 缓存策略：对带内容哈希的静态资源设置 Cache-Control: public, max-age=31536000, immutable；对 API 使用 public, max-age=0, s-maxage=... 配合 stale-while-revalidate；动态内容用 no-cache, no-store, must-revalidate。
- 长列表虚拟化：使用 @tanstack/react-virtual 的 useVirtualizer 按项高度与 overscan 渲染可视区域。
- Core Web Vitals 监控：通过 web-vitals 的 onCLS、onINP、onLCP 采集并用 navigator.sendBeacon 上报。目标阈值为 LCP < 2.5s、INP < 200ms、CLS < 0.1。
使用方式：按项目实际场景选择对应做法并参考示例代码实现，配合清单逐项核对。
适用场景：React/Vite 等前端项目的加载性能、渲染性能与指标监控优化。
限制与说明：资料未提供安装步骤、版本要求、收费方式与效果数据；具体数值阈值仅以文中给出者为准。