"性能预算与构建优化：Performance Budget 与 Bundle 分析"

概述性能预算为体积、请求数量与关键路径时间设定上限，指导工程决策与回归监测。结合 Bundle 分析与代码分割与懒加载，避免不必要的体积膨胀与阻塞。预算维度与执行维度：总 JS/CSS 体积、初始 JS 体积、请求数量、首屏渲染时间等；在 CI 中集成超限失败与告警［参考1］。Bundle 分析：使用分析工具查看包构成与依赖树，定位大依赖与重复模块；结合按需加载与 tree-shaking 降低体积［参考2］。代码分割与懒加载：路由与组件级分割，Lazy import 与动态加载资源；结合 `preload/prefetch` 与 Speculation Rules 优化导航体验。监测与回归与 Lighthouse 与实验室测试结合，跟踪体积与关键指标；在生产使用 RUM 监测。参考与验证［参考1］web.dev：Performance budgets 概念与实践（设定与监测）：https://web.dev/articles/performance-budgets［参考2］web.dev：Bundle 优化与分析实践（tree-shaking/代码分割）：https://web.dev/articles/reduce-javascript-payloads［参考3］Google Developers：性能预算与自动化集成示例与工具：https://developers.google.com/web/fundamentals/performance/optimizing-performance-budget关键词校验关键词与性能预算与 Bundle 分析一致。