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

　　上线那晚，我蹲在消防通道口抽烟，设计蹲我旁边，叼着根没点的烟——他戒了仨月，就为显摆自己新做的Figma动效规范。白板上还留着上会写的字：“资源治理 = 技术选型 + 前端基建”，墨迹都干了，边角卷起来像片蔫叶子。测试群一直在响，没人回，因为都在等CDN缓存刷完。窗外天黑得透，连路灯都没亮全，就我们俩影子被应急灯拉得又细又歪。

　　其实压根儿不是技术问题。是我自己把“建站资源3步瘦身”想得太像健身房私教课：第一课拉伸、第二课深蹲、第三课核心激活——结果上线前两小时，后端突然甩来个压缩包，说“历史遗留的SVG图标库，共87个，你看着办”。我手抖着解压，发现里头有12个是同一张logo的微调版，其中3个还是PSD源文件直接拖进来的。我说这谁干的？后端吐口烟圈：“上届实习生，转正答辩前一天传的。”我原以为删掉冗余资源就是剪指甲，结果剪到肉了——剪掉的是三年前老板拍板引进的“轻量级UI组件库”，现在它和jQuery 1.9.1挤在同一行script标签里，互相叫对方爹。

　　优胜劣汰？对，就这四个字最站得住。不是算法淘汰，是人眼淘汰。上周改需求，设计非要加个“呼吸感加载动画”，配色方案改了四版，最后一版把loading条做成了流动水纹，用WebGL渲染。我盯着控制台看资源瀑布流，那玩意儿加载了三秒半，体积比首页主图还大。我说你这是让用户看海景房广告，等加载完，用户早去隔壁买菜了。设计不吭声，但手指把Figma缩略图划得飞快，划到第十七屏，停在一张2016年的原型图上——那会儿我们连Webpack都没配，首页纯HTML，带个jQuery插件搞定轮播。他忽然说：“那时候JS才147KB，现在你光那个水纹动画脚本就283KB。”我没接话。我知道他在等我说“时代变了”，但我没说。时代没变，是人把简单事往复杂里凿，凿出窟窿再拿别的东西填。

文章配图，仅供参考

　　说白了，“3步瘦身”就是骗自己。第一步砍掉不用的npm包，第二步合并重复字体文件，第三步……第三步其实是把所有“以后可能用上”的注释行统统删了，连同那行//TODO: 接入微前端。我删的时候手稳得很，但删完一看，build时间只快了0.3秒。真正提速1.8倍的是第四步——我忍了两天，没告诉任何人，偷偷把生产环境的Source Map关了。上线那晚监控报警响了三次，全是“sourcemap not found”，我假装在修缓存，其实靠在墙根点了根新的。设计看我一眼，没说话，把那根没点的烟塞回口袋走了。

　　外卖到了没人拿，塑料袋挂门把手上晃了二十分钟，汤漏出来洇湿了三张需求文档复印件。其中一张背面印着老板上次开会画的饼图，标着“Q3达成首屏FCP≤1.2s”，笔迹潦草，圆没画圆，弧线歪向右下角，像在鞠躬。我原以为这次能兑现，结果上线后首屏是0.91秒——可那是关了Source Map、删了水纹动画、砍掉七成统计上报后的数据。真实用户看到的，还得叠加CDN抖动、弱网重试、安卓WebView的祖传bug……所以我现在不敢说“提速1.8倍”到底成没成。我只能说，当页面开始动的那一刹那，我心里松了口气——不是因为数据漂亮，是因为我终于把三年来所有人往工程里塞的“备用钥匙”、“临时方案”、“过渡期妥协”，全扔进了回收站，连废纸篓都没清空，就那么敞着口，风一吹，纸片哗啦啦往外飞。

　　下一步？我打算明天找设计喝茶。不是谈动效，是问他当年为什么坚持留着那套SVG图标。他说是怕UI换人后风格断层。我说现在风格倒是统一了，统一在十六种圆角、七套阴影深度、五种加载动效节奏上。他笑了，说我这张嘴比webpack的error提示还噎人。我没否认。烟快烧到滤嘴了，我掐灭，顺手擦掉白板上那句“资源治理 = 技术选型 + 前端基建”，底下露出一行更旧的字：“别动公共库——老李”。老李去年走的，走之前把整个mock服务迁到了本地，说是“为后续微服务化铺路”。现在那服务还在跑，只是每次npm run dev都要多花八秒去连它。这锅，我认一半。毕竟当时我点头了。

（编辑：站长网）

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