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

　　掘金上刷到那篇《建站资源3步瘦身，加载提速1.8倍》，手指悬在点赞键上三秒，没点。不是不想，是点下去前得先把嘴里那口冷掉的黄焖鸡扒拉进胃里——外卖盒盖掀开时还在冒一点白气，现在只剩油膜浮着，筷子戳进去像扎进胶冻。

　　去年四月，我们把那个老后台系统迁到新壳子上，UI走查那天会议室空调打太低，我外套搭椅背上，人缩在工位转椅里发抖。产品经理坐我左手边，指尖在平板上划三下，停住，说：“就这么点东西，能卡成这样？”他话音落的同时，我右肩后头那台红米Note 8突然亮了屏——桌上排成一排的测试机里，它自己醒了，没充电，没碰，就那么幽幽亮着通知栏，电量73%。这事儿我记不清第几次了，但记得清它每次亮都比我手里的Lighthouse报告早0.8秒。

　　“3步瘦身”？我原以为是打包策略动刀，结果第一刀劈在字体上：把woff2全换成woff，删了两套思源黑体的Latin扩展集，砍掉47个unused glyph。行。第二步是SVG sprite合并——这个我敢打包票，用的是webpack-svgstore-plugin某个小版本，build时插件会偷偷往symbol id里塞下划线，但不影响runtime，只让SVGR生成的TS类型声明报错两次，改完就能跑。第三步才是真麻烦：把所有内联script按首屏/非首屏切片，丢进HTML注释里等DOMContentLoaded后eval——不是懒加载，是“假装加载”，骗水合，骗首屏，骗LCP。这个我说不准，反正跑通了，但上周五QA在安卓8.1上复现过一次白屏，抓包发现是eval里有个async函数被吞掉了await，没报错，就静默挂起。我们最后把它写死成Promise.resolve().then(() => {})，绕过去了。

　　提速1.8倍？测的是FCP和LCP中位数，不看P95，不看弱网，不看Service Worker失效后的兜底链路。实验室里跑出十八秒变十秒，线上P95反而慢了零点三秒——CDN边缘节点有台机器缓存没刷新，把老版HTML吐给了深圳某栋写字楼B座二十七层的用户，他第一次打开就卡在那个被注释掉的eval块里，loading spinner转了三百七十二圈才跳出来。这事儿没进周报，只在我本地日志里留了条warn：“sw cache stale on edge-613-shen”。后来运维说那台机器上个月刚换过硬盘，SMART显示重分配扇区数21，但他们没觉得这和JS执行有关。

　　地铁上掏手机复现过三次。早高峰四号线，信号在西直门站断续跳变，我蹲在车厢连接处，手指冻得发僵，反复刷同一个测试页，看DevTools Network里TTFB跳0.2→1.8→0.3→爆红，第四次终于打出1.8倍，可LCP时间没变，只是CLS降了——因为那台测试机屏幕太小，折叠导航栏自动收起，视觉跳动消失了。那一刻我觉得很荒谬：我们拼命优化的是用户眼睛看到的跳动，不是JS解析器吐出来的字节码；是设计师在Figma里调的像素偏移，不是V8的TurboFan是否触发了内联缓存。

　　隔壁组老张去年十月做过类似的事，他用的是rollup-plugin-replace把所有console.log直接干掉，连debugger都替换成空语句，结果上线第二天客服电话被打爆——有个保险页面的投保按钮，在iOS Safari 15.4上点十次才有一次触发，查到最后是replace把if (env === 'prod') { ... }里那个env变量名也替了，变成if ('prod' === 'prod')，整个条件块被压缩器识别为恒真，提前展开了。他后来没提“瘦身”，只说“删得太净，留不住上下文”。

　　所以我说“优胜劣汰”站得住。不是指技术优劣，是指存活下来的东西必然带伤——字体缺拉丁扩展集？行，中文用户不抱怨；eval吞await？行，安卓8.1占比只剩百分之二点七；边缘节点缓存失灵？行，深圳那栋楼今年Q3要拆。这些东西不是被设计出来的，是被线上灰度、A/B分流、监控告警、用户投诉一层层筛下来的。就像我桌上那排测试机，红米Note 8永远第一个亮，OPPO Reno5永远最后一个响应，iPhone 12 Pro每次热更新完必重启——我们不修，只记日志，只标记“已知行为”，然后把它们放进回归用例池。优胜的，是没被用户骂到PRD改版前的方案；劣汰的，是还在等RD填坑的bug单。就这么简单。

　　上周我拆开那个被注释掉的eval块，发现里面调用了window.IntersectionObserver，但没做fallback——意味着当浏览器不支持时，整个首屏逻辑就静默死亡。我没补polyfill，而是加了段注释：// 2023Q2起，此特性覆盖率＞98.6%，见internal/caniuse-2023-q2.xlsx —— 文件确实存在，但excel里公式用的是=SUM(C2:C99)，C列数据是手输的，没连data source。这个细节删掉，意思完全不受影响。

文章配图，仅供参考

（编辑：站长网）

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