建站资源优化三步瘦身，加载提速1.8倍

　　去年2月，我蹲在客户机房里调CDN缓存头，对面那个穿灰卫衣的运维小伙子第三次把咖啡泼在键盘上——他手抖不是因为紧张，是昨儿通宵切镜像没睡醒。我原以为只要改个Vary头就能压住首屏渲染延迟，结果curl -I扒出来一看，连font-display: swap都没开，还塞着三个WebFont全量加载。这事儿我敢打包票：去年二月那会儿，他们主站TTFB压根没进过两百毫秒。

　　建站资源优化三步瘦身，加载提速1.8倍。就这句，我写在培训课件第一页，底下三十个前端盯着我看，有人掏手机拍PPT——拍完没关闪光灯，白光啪一下打在我眼镜片上，反光刺得我闭了下眼。我说“优胜劣汰”，不是形容词，是动作：第一步删掉所有没被JS引用过的CSS规则，第二步把所有改成preload="metadata"，第三步把Webpack SplitChunks里那堆name: 'vendors~xxx'手动拆成五个chunk，但只留三个在entry点。别的都扔了。不测LCP？你先让Lighthouse别在跑audit时突然弹出Chrome更新提醒再说。

　　那天下午三点十七分，窗外开始下雨，雨点砸在机房南侧钢化玻璃上像小石子，叮、叮、叮，节奏错乱。我正用curl测gzip压缩率，隔壁工位老张接了个电话，声音特别亮：“对，是‘天穹云’那个项目，服务器我昨天已经清过日志……”他讲到这儿忽然顿住，低头翻自己电脑桌右下角粘着的便利贴——那张纸边都卷了，上面写着“别忘拔U盘”。他没拔，就盯着看。我顺手把刚编译完的dist目录里一个叫iconfont.347d9f.css.map的文件拖进回收站，没点确认，就挂着，窗口半开着，灰底白字，停在那儿。

　　有人问我为啥不推ESBuild？我说我试过。前年冬天，在朝阳门那边一栋老楼里给一家做跨境SaaS的公司迁构建链路，ESBuild跑得确实快，快得我泡面还没泡开它就finish了。可部署上去第二天，他们客服收到十七条投诉：用户说筛选框里的图标全变成方块。查了一上午，发现是ESBuild默认把woff2字体转成base64内联时，忘了处理某些Unicode范围，而他们设计师偏爱用阿拉伯数字加泰文字符混排的图标命名——比如icon-cart-३.svg。这个我说不准是不是ESBuild bug，但我知道，他们CTO看见报错截图后，当场把保温杯盖子拧松又拧紧，三次。我没提这事儿，因为和三步瘦身没关系。

文章配图，仅供参考

　　机房空调坏了两天，风扇嗡嗡响，像台拖拉机在胸口匀速碾。我们改完第三步Chunk切割，测出来平均首屏时间降了1.8倍。不是1.8秒，是1.8倍。你别笑，真有人当倍数是绝对值算的。有个实习生拿着我发的报告去跟架构师争，说“老师，1.8倍不等于提速80%啊”，架构师直接回他：“那你告诉我是提速80%还是82.3%？”实习生愣住，我插嘴：“是82.3%，但我说不准这个小数点后一位是四舍五入还是截断。”没人理我。桌上那份饿了么订单显示：【已送达｜凉皮+冰峰｜骑手已离开】，塑料袋边沿沾着一点辣椒油，在显示器反光里像一小滴血。

　　其实最让我后怕的是，上周复盘才发现，我们删掉的那批CSS里，有一段关于高对比度模式的@media查询，整整八十七行。删的时候根本没扫到。后来靠QA同事在Win11系统里开高对比主题才揪出来——那天她戴着眼镜摸屏幕，眼镜腿滑下来，她随手用嘴唇往上顶了一下。现在补上了，用@layer base包着。但这事和三步瘦身没关系，我就记着，不讲。

　　最后一天上线前夜，我站在楼道抽烟，消防通道门没关严，风灌进来吹散烟雾，也吹得走廊感应灯一闪一灭。旁边另一个项目组的老刘端着搪瓷缸子路过，缸子印着“先进工作者1998”，他问我：“你这瘦身法，能喂饱SEO爬虫吗？”我没答。他喝了一口，转身时缸子里的枸杞沉底了，红得发暗。我后来想，可能该答的——但当时就想点第二支烟。

　　下周一我去城西新项目驻场，带两台MacBook Pro M3，一台装干净系统，另一台…装了三年没重装过的那台，里面还存着2018年写的webpack-bundle-analyzer可视化模板。要不要用？我说不准。但如果你明天要上线，就别碰Tree Shaking的深度配置，先把所有img标签的loading="lazy"全加上。别的，等雨停了再说。

（编辑：站长网）

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