前端工程化·性能防御：从 Bundle 预算到 CI 拦截的落地实践

{
  "size-limit": [
    {
      "path": "dist/assets/index-*.js",
      "limit": "150 kB"
    },
    {
      "name": "首屏关键 CSS",
      "path": "dist/assets/index-*.css",
      "limit": "30 kB"
    }
  ],
  "scripts": {
    "size": "size-limit"
  }
}

# 如果超过了 150 kB，直接报错中断提交！
npx size-limit

// .eslintrc.cjs
module.exports = {
  rules: {
    // 强制阻止全量引入 lodash
    'lodash/import-scope': ['error', 'method'],
    // 限制重复导出与无用模块
    'import/no-duplicates': 'error',
    'import/no-cycle': 'error', // 循环依赖会导致 Tree-shaking 失效
  }
};

// vite.config.ts
import { defineConfig } from 'vite';
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [
    visualizer({
      open: false, // 别每次 build 都弹窗打扰思路
      filename: 'dist/stats.html',
      gzipSize: true,
      brotliSize: true,
    }),
  ],
});

{
  "ci": {
    "collect": {
      "startServerCommand": "npm run preview",
      "url": ["http://localhost:4173/"],
      "numberOfRuns": 3
    },
    "assert": {
      "assertions": {
        "categories:performance": ["error", { "minScore": 0.85 }],
        "first-contentful-paint": ["warn", { "maxNumericValue": 2000 }],
        "interactive": ["error", { "maxNumericValue": 3500 }],
        "uses-responsive-images": "warn"
      }
    },
    "upload": {
      "target": "temporary-public-storage"
    }
  }
}

name: Performance Guard

on: [pull_request]

jobs:
  lhci:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Install & Build
        run: |
          npm ci
          npm run build

      - name: Run Lighthouse CI
        run: |
          npm install -g @lhci/cli@0.13.x
          lhci autorun
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}

// src/monitor/perf.ts
import { onLCP, onINP, onCLS } from 'web-vitals';

interface MetricPayload {
  name: string;
  value: number;
  rating: 'good' | 'needs-improvement' | 'poor';
}

function sendToAnalytics(metric: MetricPayload) {
  const body = JSON.stringify({
    metricName: metric.name,
    metricValue: Math.round(metric.value),
    rating: metric.rating,
    path: window.location.pathname,
  });

  // 使用 sendBeacon 保证在页面卸载时也能可靠发送，不阻塞主线程
  if (navigator.sendBeacon) {
    navigator.sendBeacon('/api/perf-metric', body);
  } else {
    fetch('/api/perf-metric', { body, method: 'POST', keepalive: true });
  }
}

// 监听三大核心指标：最大内容绘制、交互延迟、累积布局偏移
export function initPerformanceDefense() {
  onLCP(sendToAnalytics);
  onINP(sendToAnalytics); // 替代了 FID 的全新交互性能指标！
  onCLS(sendToAnalytics);
}