目标
包体积按每个特性几 KB 的速度增长,直到产品加载像湿水泥。按路由设预算让体积变成可见的决策,分析器把每个字节归因到模块,CI 门禁把预算从愿景变成执法。要给门禁留带过期与责任人的豁免通道,否则大促前一周它必被整体关掉。
步骤要点
- 按路由而非全局设预算:给落地页、应用、后台各定 gzip 字节预算,反映各自的价值与流量而非一刀切。
- 度量实际交付物:CI 每次构建出包体报告,含每路由 gzip 体积与逐模块字节归因。
- 攻击最大超标项:按报告移除头部成本——重复库、整包导入该用子模块的、被急打包的冷门特性。
- 重而少用的转懒加载:管理台、编辑器、图表这类重路径用动态 import 切分,可能用到时再预取。
- CI 门禁执法:任何路由超预算即构建失败,已接受的例外走带过期的显式豁免。
排错提示
体积涨了没人知道是没接预算检查,让 CI 对路由超预算直接失败;豁免只增不减等于没有预算,豁免必须带 owner 与到期日;分析器里看到两个日期库或两份 lodash 是依赖解析问题,先合并版本再谈瘦身。
适用边界
gzip 字节不等于加载时间,弱网与解析成本还需配合字段数据评估;懒加载边界增加交互延迟,预取策略要按使用概率调校。
代码示例
route budgets (gzip):
/ 130KB current: 214KB VIOLATION
/app 260KB current: 241KB ok
/admin 180KB current: 412KB VIOLATION
offenders (analyzer, route /):
moment + locale data 68KB -> date-fns (12KB)
lodash full 24KB -> lodash-es tree-shaken (4KB)
chart lib (eager) 51KB -> lazy on chart open
offenders (/admin):
two editor libs bundled -> keep one, lazy other
after: / = 122KB (under budget), /admin = 171KB
CI: route budget check FAILS any +40KB regression