precache 列了三百个文件 首次安装为什么卡十六秒

第一次打开站点，页面转圈十六秒才可交互，Application 里能看到几十个请求排队，安装完成后缓存占用一百二十兆。日志里能对上时间点，这种反而好排。

预缓存把整站图片和视频封面都塞了进去，安装阶段要全部下载完才算成功，任何一个失败整个安装都会回滚。清单里还有带查询串的重复地址，实际请求数比列表还多。这一点先确认清楚，后面就不用反复试。

precacheAndRoute(self.__WB_MANIFEST.slice(0, 40));
// 图片走运行时：
registerRoute(({request}) => request.destination === 'image',
  new CacheFirst({cacheName: 'img'}));

「precache 清单过大」改完先别急着全量，挑一台机器放半天，真有问题这段时间就能看出来。偶发问题先统计频率，一小时几次和一天一次，查法完全不同。

处理上按这个顺序：预缓存只留 HTML、核心 JS 和 CSS，图片改成运行时缓存；给单次安装设置数量上限，超出部分延后到空闲时再拉；去掉带时间戳和查询串的地址，统一用路径做键。

结果对不对很好判断，首次打开四秒内可交互，缓存占用降到二十兆以内，离线仍能打开首页和文章页。