← 中文资源

简体中文版本

前端包体瘦身循环工作流

按路由设字节预算,持续度量已交付包体,移除最大超标项,用 CI 门禁守住战线。

阅读英文原文

目标

包体积按每个特性几 KB 的速度增长,直到产品加载像湿水泥。按路由设预算让体积变成可见的决策,分析器把每个字节归因到模块,CI 门禁把预算从愿景变成执法。要给门禁留带过期与责任人的豁免通道,否则大促前一周它必被整体关掉。

步骤要点

  1. 按路由而非全局设预算:给落地页、应用、后台各定 gzip 字节预算,反映各自的价值与流量而非一刀切。
  2. 度量实际交付物:CI 每次构建出包体报告,含每路由 gzip 体积与逐模块字节归因。
  3. 攻击最大超标项:按报告移除头部成本——重复库、整包导入该用子模块的、被急打包的冷门特性。
  4. 重而少用的转懒加载:管理台、编辑器、图表这类重路径用动态 import 切分,可能用到时再预取。
  5. 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