给你的项目定个性能预算

功能迭代越频繁，性能越容易滑坡。性能预算（Performance Budget）是防止退化的一道硬防线——规定页面各项资源的上限，超标就报错。

核心指标

不要面面俱到，盯住这三个就够了：

指标	目标	说明
LCP	< 2.5s	最大内容绘制，衡量加载体验
TBT	< 200ms	总阻塞时间，衡量交互性
CLS	< 0.1	累积布局偏移，衡量视觉稳定性

这三项就是 Google Core Web Vitals，达标即被视为「良好」。

资源预算

更直观的是给资源大小设硬上限：

// .lighthouserc.js
module.exports = {
  ci: {
    assert: {
      assertions: {
        'resource-summary:script:size': ['error', { maxNumericValue: 150000 }],
        'resource-summary:stylesheet:size': ['error', { maxNumericValue: 20000 }],
        'resource-summary:font:size': ['error', { maxNumericValue: 50000 }],
        'resource-summary:total:size': ['error', { maxNumericValue: 500000 }],
      }
    }
  }
};

在 CI 中用 Lighthouse CI 校验，超标直接阻止合并。

Webpack/Vite 侧集成

// vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    chunkSizeWarningLimit: 100, // 100KB，单 chunk 超过就警告
    rollupOptions: {
      output: {
        // 禁用超大动态导入的内联，保持 chunk 健康
        inlineDynamicImports: false,
      }
    }
  }
});

逐步收紧

不要一上来就把预算设得太激进。建议三步走：

测量基线：记录当前各项指标的真实值
设定目标：在基线基础上收紧 20%
持续优化 → 收紧：达标后继续收紧 10-20%

第一次：JS Bundle 200KB → 预算 160KB
达标后：预算 140KB → 达标 → 预算 120KB

预算违规怎么办

遇到超标先分析而非妥协：

图片太大？ → 换 WebP/AVIF + 懒加载
JS 包太大？ → Tree Shaking + Code Splitting
字体太多？ → 子集化 + font-display: swap
第三方脚本？ → 延迟加载或使用 facade

性能预算的核心价值不是数字本身，而是让团队在每次 PR 中都关注性能，把退化消灭在合并之前。