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

　　告警响的那一刻，我正把泡面叉子插进酱包里，没撕开——手抖得插不进。三台机器的 CPU 告警叠着 CDN 缓存命中率掉到 41% 的弹窗蹦出来，右下角还挂着开发刚发的截图：“前端资源打包完 8.7M，比上版小了 200K。”我盯了三秒，叉子戳破塑料袋，酱漏在键盘 F 键上。

　　我原以为是 CDN 刷新延迟，毕竟去年十月也这么闹过一回，清完缓存、重推边缘节点，十分钟后就好。这次我连 ssh 都没登，直接抄起手机给机房老张发语音：“张哥你顺手扫一眼后端日志，我看下缓存头。”他回得快：“哎哟你等会儿——空调又抽风了，机柜顶上结霜，刚才拿吹风机烘主板呢。”窗外天快亮了，但没光，云压得低，整片天灰白泛青，像泡面汤凉透了浮的那层油。

　　其实根本没扫日志。我点开 Chrome DevTools 的 Network 标签页，Network 筛选器切到 “All”，然后 Ctrl+F 找 “.js”——满屏红色 304 里混着五个绿色 200，全是 vendor.6a5b3c.js、app.f9e8d7.js 这种名字，每个都 2.1M 起跳。再往下拉，发现 index.html 里居然硬塞了三段 base64 的 SVG 图标，加起来 387KB；而最底下那个 lazy-loaded 的统计脚本，体积写着 “1.2MB（gzip 后）”，括号里还贴心标了 “含全量 lodash 和 moment-timezone”。我鼠标悬停上去，tooltip 闪了一下：「已启用 Tree-shaking」。我笑了，关掉窗口时顺手点了下旁边还开着的微信备份聊天记录窗口，进度条卡在 73%。

　　火大。真火大。上个月迁移复盘会上，开发小王拍胸脯说“Webpack5 开了 module federation，按路由拆包，首屏 JS 下来一半”，我信了，还替他跟运维组长多要了半台负载均衡的权重配额。结果呢？他拆的是路由，可所有路由都 import 了同一个 utils.js，utils.js 又 import 了 /src/lib/legacy/ie-polyfill.js，ie-polyfill.js 里还藏着个被 webpack ignore 掉的 require(‘crypto’) ——crypto 在浏览器跑不了，但它在构建时会被 resolve 进 chunk，最后全打进 vendor 里。没人删，没人问，没人查 treeshaking 真删了啥。就那么躺着，像我们值班室铁皮柜顶上那盒三年前留下的感冒冲剂，药片潮得粘成块，说明书字迹都晕开了，但谁也没扔。

文章配图，仅供参考

　　这事儿能提速 1.8 倍？站得住。不是靠玄学压缩，也不是靠新 CDN。是优胜劣汰——你留着那堆没人敢动、连 source map 都打不出来、console.warn 都被 try-catch 吞掉的老代码，它就永远在那儿吃带宽、占内存、拖加载、骗你相信“已优化”。上周二我看到测试环境有台机器跑了整整三小时还没挂，top 里 httpd 进程 CPU 占 13%，可磁盘 IO 满的，一看 lsof，全在读同一份 47MB 的 bundle.zip——zip 里解出来是 189 个 js 文件，最小那个 2.3KB，最大那个叫 main.prod.v3.2.1.min.js.map，6.4MB。map 文件？生产环境要 map 干嘛？就为了方便 QA 在控制台里翻源码报错行数？我说这玩意该删，同事摇头：“留着吧，以后排障用。”我心想，排障用？你排障时打开 sourcemap 速度比 DNS 解析还慢，你确定这不是障？

　　家里冰箱坏了，修理工说“压缩机线圈老化”，我蹲那儿看了十分钟，最后掏手机搜“老款松下冰箱线圈代换型号”，搜到一半手机没电了。充电时我想，这事跟建站资源一样：你以为问题在压缩机，其实线圈早该换了，只是你每次听见异响，第一反应是调小音量，而不是换喇叭。我们干运维的，天天调 nginx buffer_size、改 keepalive_timeout、给 Redis 加 slave，可没人敢碰 build 产物里那个写死的 google-analytics.js 的 CDN 地址——因为那是产品上线当天 PM 拉着开发、测试、法务一起签字确认过的 URL。签字笔油墨都没干透，它就成了祖宗遗训。

　　后来我在 Slack 里甩了条链接，是 Webpack 官网一句极小的注释：“Tree-shaking does not eliminate code that is imported but never used in an evaluated expression — e.g., `import('./some-module.js')` without awaiting.” 我没解释，就贴着。五分钟后，开发小王回了个 ????，然后撤回了。十分钟后，他发了新构建产物的 diff，vendor.js 小了 64%，index.html 里的 inline SVG 全挪走了，base64 图标换成了 sprite.svg + use。我点了下载，双击打开，看见 console 里第一次没飘出 “Cannot resolve ‘fs’” 的红字。屏幕右下角微信又弹进来，是我妈发的：“今早排骨炖好了，你爸说给你留两块，凉了热热再吃。” 我没回，把这句话复制进 Vim，当成临时 notes 存着——反正下次部署前，我得先补个 pre-build 的 check script，扫一遍 import() 动态引入有没有落单的 crypto 或 fs，再 grep 一遍 HTML 里有没有 base64 src，再 kill 一次所有超过 1MB 的未压缩静态资源。这事本来能避免。真能。

（编辑：站长网）

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