详情页从 2.8 秒到 380 毫秒:我只用了 2KB 代码,没动一行业务逻辑

📅 2026/7/1 18:13:47
详情页从 2.8 秒到 380 毫秒:我只用了 2KB 代码,没动一行业务逻辑
起因公司运营后台的商品管理模块——一个列表页挂 120+ 个 SKU,点击任意商品跳转详情页。每次点击后,白屏 2-3 秒才看到内容。用户体验团队给了数据:用户平均浏览 8 个商品后放弃操作,流失率 40%。产品说"加 loading 动画",但 loading 再好看也改变不了页面慢的事实。问题很清楚:详情页的 JS bundle 有 340KB,CSS 28KB,首屏 API 要等 600ms。这些都在用户点击后才开始加载——晚了。方案选型常规方案是Service Worker 预缓存。但接入成本高——要写 sw 脚本、处理版本更新、测试缓存策略,而且我们的运营后台是 nginx 反代的,SW 的 scope 路径有一堆坑。我换了思路:能不能在用户还没点击的时候,就把视口内看得见的那些链接提前加载好?搜到了 Google Chrome Labs 的quicklink——2KB gzipped,零依赖(除了一个 throttle 工具),专门干这件事。接入一行代码:scriptsrc="/libs/quicklink.umd.js"