大家好，我是程序员柏风，AI 最全的 Vibecoding 学习地图 http://coderoadmap.cn 作者。
Lighthouse 与 DevTools
跨平台前端最终都要回答：够快吗、够稳吗、够「像 App」吗？ Lighthouse 给可重复的审计分数；Chrome DevTools 给请求、缓存、SW、内存的实况——与 http-protocol-essentials 的 Network 视角互补。
学习目标
- 解读 Lighthouse 中 Performance、PWA、Accessibility 等类别
- 用 DevTools Application / Network 排查 SW 与缓存问题
- 对照路线图 lighthouse、devtools-usage 节点
Lighthouse 快速跑分
DevTools → Lighthouse → 选 Mobile/Desktop、Categories → Analyze
或 CLI（适合 CI）：
npx lighthouse https://coderoadmap.cn/tracks --only-categories=performance,pwa --view
| 类别 | 跨平台相关关注点 |
|---|---|
| Performance | LCP、CLS、TBT；移动网络下 cpf-mobile 首屏 |
| PWA | Manifest、SW、HTTPS、响应式（cpf-pwa） |
| Accessibility | 触控目标、对比度（html-css-essentials） |
| Best Practices | HTTPS、控制台错误、图片宽高 |
分数是 趋势工具，不是 KPI 崇拜——改一项指标可能伤害另一项，需结合产品目标。
DevTools 关键面板
Network
- 禁用缓存 + 节流 Fast 3G，模拟移动
- 看 http-caching 头：
Cache-Control、ETag Size列区分 disk cache / SW / network
Application
- Manifest：字段是否生效
- Service Workers：状态、skipWaiting、Offline 勾选
- Storage：Local / IDB 是否膨胀（cpf-webapis）
Performance
- 录一段滚动 tracks 列表，找 Long Task 与布局抖动
与 React / 工具链
- react-essentials 大列表：React DevTools Profiler + Lighthouse 结合
- ft-vite 生产构建：分析 bundle，避免把整库打进首屏
- Electron：除 Web 指标外，还要看 内存占用、启动时间——Lighthouse 只覆盖 Web 层
常见 PWA 审计失败与对策
| 审计项 | 常见原因 | 方向 |
|---|---|---|
| 无 SW | 未注册或 scope 错 | 见 cpf-sw |
| 图标尺寸不足 | manifest icons 缺 512 | 补全 PNG |
| 离线不可达 | fetch 无 fallback | Network First + offline.html |
| HTTPS | 本地 http 测试 | 生产必须 TLS（http-https） |
练习
- 对本地或 staging 跑一次 Lighthouse PWA 类别，记录失败项三条
- Network 里标出一条来自 Service Worker 的响应
- 写一句：Performance 90+ 是否等于「用户觉得快」？为什么
小结
Lighthouse 定方向，DevTools 找根因；PWA 与性能审计要和 HTTP、SW、构建体积一起看。 下一课综合练习：为 platform 评估 PWA 可行性。