包体积削减工作流

目标

应通过处理最重的依赖并设预算来削减发送的 JS。本工作流分析并可视化各模块占用字节找出最重模块，用更轻的替代或删除未用代码处理首要元凶，把非首屏所需代码拆分并懒加载，最后加入 CI 预算在超阈值时失败以防回归。

步骤要点

1. 分析并可视化各模块占用字节。
2. 替换或删除最重的模块。
3. 拆分并懒加载非关键代码。
4. 加入 CI 预算防止体积回归。

# visualise the bundle composition
npx source-map-explorer dist/assets/*.js

验证

按顺序执行上述步骤后，逐项确认每个步骤的预期状态均已满足；只有全部预期状态成立，才认为本流程完成。若某一步未达到预期状态，应先按排错提示排查，不要跳过继续，以免掩盖问题。

排错提示

• 入口包中的重依赖会阻塞渲染。
• 无预算会让体积悄悄上涨。
• 删除在用代码会破坏功能。

适用边界

• 需要打包分析工具。
• 预算宜硬性失败。