页面加载慢、LCP/CLS/INP 指标差或包体积过大时…

当 Web 应用页面加载慢、Core Web Vitals 不达标或 bundle 过大时，通过代码分割、图片优化、Service Worker 缓存、压缩和性能监控来提速。

适用场景

解决思路

1. 用 React 的 lazy 和 Suspense 配合 react-router-dom 的 Routes/Route 对路由组件做代码分割，按页面动态 import。
2. 在 webpack.config.js 中配置 optimization.splitChunks：chunks 设为 'all'，并设置 cacheGroups.vendor 用 test: /[\\/]node_modules[\\/]/ 把 node_modules 拆到名为 vendors 的 chunk。
3. 用 <picture> 提供 WebP 和 JPEG 多格式源，<img> 上设置 srcset（400w/800w/1200w）与 sizes，并加 loading="lazy"、decoding="async" 和 alt。
4. 编写 sw.js：install 事件中用 caches.open(CACHE_NAME).then(cache => cache.addAll(ASSETS)) 预缓存资源；fetch 事件中先 caches.match(event.request)，命中则返回缓存，否则 fetch 后 cache.put 克隆响应再返回。
5. 用 PerformanceObserver 监控 LCP：observe({ type: 'largest-contentful-paint', buffered: true })，读取 entry.startTime 并上报。
6. 用 PerformanceObserver 监控 CLS：observe({ type: 'layout-shift', buffered: true })，累加 !entry.hadRecentInput 的 entry.value 并上报。
7. 用 PerformanceObserver 监控 INP（2024 年 3 月起取代 FID）：observe({ type: 'event', buffered: true })，用 entry.processingEnd - entry.processingStart 计算并上报。
8. 实现 sendToAnalytics({ metric, value }) 占位函数，通过 fetch POST 到 /api/analytics 上报指标（可替换为 Google Analytics、Segment 等）。
9. 对照性能目标：LCP <2.5s 为良好、2.5-4s 需改进；INP <200ms 良好、200-500ms 需改进；CLS <0.1 良好、0.1-0.25 需改进；TTI <3.8s 良好、3.8-7.3s 需改进。
10. 在 Nginx 中开启压缩：gzip on; gzip_types text/plain text/css application/json application/javascript; gzip_min_length 1000; gzip_comp_level 6;。
11. 遵循最佳实践：用代码分割减小 bundle、用合适格式优化图片、策略性懒加载、使用 HTTP 缓存头、启用 gzip/brotli 压缩、持续监控 Core Web Vitals、实现 Service Worker、延迟非关键 JS、优化关键渲染路径、在真实设备和网络上测试。
12. 按检查清单逐项落实：为路由启用代码分割、懒加载首屏以下组件、优化并压缩图片、实现 Service Worker 缓存、启用 gzip/brotli 压缩、监控 Core Web Vitals、减少阻塞渲染的资源。
13. 参考 references/compression-monitoring.md 获取 webpack 压缩插件、Apache .htaccess 压缩配置、TTFB 监控和 Puppeteer 自动化测量。
14. 参考 references/typescript-advanced.md 获取 TypeScript lazyLoad 工具、图片组件、带离线回退的 Service Worker、TerserPlugin 配置和完整 PerformanceMetrics 接口。
15. 使用 Lighthouse / PageSpeed Insights、WebPageTest、Chrome DevTools Performance 面板、web-vitals npm 包等工具进行测量。
16. 参考 Web Vitals、Google PageSpeed Insights、Lighthouse、WebPageTest 和 Performance API 等资源。