建站资源3步瘦身，加载提速1.8倍

　　去年5月份，那个体测日——就是第一次体测完，我蹲在器械区角落看数据表，手抖着翻页，咖啡都洒在“静息心率”那栏了。前台煮咖啡，水蒸气糊了整块玻璃，我看不清自己在镜子里的影子，只看见镜子右下角那道划痕，像条歪掉的括号，从2019年就挂着，没人补。

文章配图，仅供参考

　　第一步：删。真删。不是挪进异步队列，是rm -rf。我们砍了三个埋点SDK、两个UI组件库的全量包、还有那个号称“智能推荐”的广告模块——它居然还带了个1.2MB的字体文件。删完那天，测试组小杨当场在监控屏上截了瀑布图，帧率曲线像被刀削过，直愣愣往上翘。我盯着看，饮水机旁一次性杯堆得歪斜，杯沿沾着半圈茶渍，她伸手去拿第三杯，手指甲盖断了一小块，没吭声。

　　第二步：换。把WebP全换成AVIF？不，太虚。我们换的是交付节奏——图片不再等设计师传源文件，前端自动抓取Figma插件生成的压缩图，尺寸精度卡死在viewport内，宽高比偏差超2%就打回。王敏——会籍那边的，总在更衣室门口喊人，门关不严，缝里漏出点白光——她上周问我：“你那个‘建站’到底建啥？”我说“建个能喘气的站”，她笑了，笑完顺手把我桌上那包没拆的蛋白棒塞进包里走了。我追出去说那是样品，她摆摆手，包带子断了，晃了一下，没停。

　　第三步：卡。不是卡时间，是卡资源生命周期。所有静态资源加Cache-Control: max-age=31536000，但关键路径里的CSS和JS，强制加了?v=20230517。日期我记不清具体是哪天改的，大概那阵子。李哲后来跟我说，他们线上灰度的时候，发现某个旧版本缓存没清干净，导致按钮点击没反馈——不是逻辑错了，是CSS里的pointer-events: none那段被多缓存了两天。我们没修代码，直接让运维清了边缘节点。地胶被踩出的黑印，就在那个节点清理后第三天，我蹲下系鞋带时看见的，像一道淤青，横在力量区和有氧区交界那儿。

　　优胜劣汰？对。不是谁更狠、谁更懂webpack，是活下来的资源，它自己会呼吸。你看那个被砍掉的推荐模块，上线半年零UV——它没死，是根本没活过。而留下的轮播图组件，现在撑着整个首页转化，可它压缩后只有87KB，用的是原生 + fetch，连Vue都没引。这不是选出来的，是筛出来的。筛的时候没人投票，就靠数据：首屏渲染耗时＞2s的，一律进淘汰池。我原先觉得应该给个缓冲期，给三次机会——结果第一轮筛完，67%的资源连第二次渲染都等不到。

　　不过说到缓冲……上个月私教课消课率又跌了。赵磊那个班，连续三周没拉满，他昨天练臀桥时核心收紧不对，骨盆前倾代偿，我让他暂停，他抹了把汗说：“姐，我现在看APP加载比看自己围度还上头。”我一愣，没接话。他手机在哑铃架旁边响，微信提示音，短促，一声，没再响第二下。

　　反常识吧？提速不是为了更快做更多事，是为了让“等”变得可忍受。用户不是不想等，是受不了“等得没谱”。你见过会员站在体测仪前反复刷二维码吗？因为加载条卡在98%，不动，也不报错，就挂在那里。我们以前也那样，资源加载卡住，像饮水机旁那个坏掉的制冷键，按下去，灯亮，水不凉。

　　我原以为得重构整个构建链路，结果真正起效的是——把build目录里那个叫“legacy-polyfill.js”的文件，从“必须加载”改成“按需检测后加载”。测了十台主流机型，九台跳过它。剩下那台？小米Note3，2017年的，用户还在用。我们给它单独配了个17KB的降级脚本，不兼容新API，但能跑通按钮点击。赵磊说这就像给膝盖旧伤员配护膝——不是治好了，是让它别碍事。

　　所以接下来……先跑一轮真实设备采集。不找实验室，就蹲这儿，器械区。等会员练完，借手机跑Lighthouse，录首屏录像，拍加载过程里他们眨几次眼。眨眼间隔＞3.2秒的，资源优先动刀。别的先放放。反正镜子上那道划痕也擦不掉，不如让它继续划着。

（编辑：应用网_阳江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!