Vite 客户端运行时性能：加载策略、缓存与核心 Web 指标

理想链路：
构建：产物体积小 + chunk 清晰
部署：CDN + 长缓存 + gzip/brotli
运行：按需加载 + preload 关键资源 + 交互零阻塞

// 路由级懒加载（React）
const About = React.lazy(() => import("./pages/About"));
// Vite 会把 About 拆成独立 chunk，仅在访问时下载

// 函数级懒加载（工具类大库）
const heavyUtil = (await import("./heavy-util")).default;

// vite.config.ts：手动拆 chunk，把稳定大库隔离
build: {
  rollupOptions: {
    output: {
      manualChunks: {
        react: ["react", "react-dom"],
        vendor: ["lodash", "axios"],
      },
    },
  },
}

<!-- preload 关键资源 -->
<link rel="preload" as="script" href="/assets/main-abc123.js">
<link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/xx.woff2">

<!-- prefetch 下一路由 chunk（基于路由预测） -->
<link rel="prefetch" href="/assets/about-def456.js">

// Vite 的 build.modulePreload：自动给入口 chunk 生成 preload
build: {
  modulePreload: { polyfill: false },
}

带 hash 的资源（/assets/main-abc123.js）：
  → 内容变则文件名变 → 可长缓存（immutable, 1y）
  → 文件没变，浏览器直接用缓存

不带 hash 的（index.html）：
  → 每次协商（no-cache 或 ETag），保证新版本快速生效

# 示例（nginx）
location /assets/ {
  expires 1y;
  add_header Cache-Control "public, immutable";
}
location / {
  add_header Cache-Control "no-cache";  # index.html 每次校验
}

LCP 构成：发现 → 下载 → 解码/解析 → 渲染

优化：
□ 发现：preload LCP 资源（主图/首屏 JS/字体）
□ 下载：减少体积（压缩/去重），CDN 就近
□ 解析：减少主线程阻塞（首屏 JS 精简）
□ 渲染：字体 font-display: swap，图片尺寸预留

/* 图片尺寸预留：防止 LCP 元素布局抖动 */
img { width: 640px; height: 360px; }
/* 字体异步加载：不阻塞文本渲染 */
@font-face { font-display: swap; }

INP 优化路径：
□ 减少主线程长任务（>50ms 的任务拆分）
□ 事件处理去重/节流（高频事件）
□ 避免昂贵的重新渲染（状态粒度、memo）
□ 懒加载非交互必需代码（减少初始 JS 执行）
□ 输入处理用 requestIdleCallback 降级

// 高频事件节流，避免主线程被刷爆
window.addEventListener("scroll", throttle(() => {
  updateUI();
}, 16), { passive: true });

压缩层次：
□ 代码压缩（Vite 默认 esbuild/terser 压缩）
□ gzip（~65% 压缩率）/ brotli（~70%+）
□ 预压缩产物（构建时生成 .gz/.br，服务器直接喂）
□ 去重与 tree-shaking（消除未用代码）
□ 依赖瘦身（只引子函数：lodash → lodash-es 按需）

// 按需引入（避免整个 lodash 进 bundle）
import debounce from "lodash-es/debounce";
// 或配置 vite 别名只引按需路径

# 预压缩（nginx 直接服务压缩产物）
for f in dist/assets/*.js dist/assets/*.css; do
  gzip -9 -k "$f"  # 生成 .gz
done

// 性能预算（示例）：
{
  "首屏 JS ≤ 200KB (gzip)",
  "产物总量 ≤ 800KB (gzip)",
  "单 chunk 最大 ≤ 400KB (gzip)",
  "LCP 中位数 ≤ 2.5s（RUM 实测）",
  "INP 中位数 ≤ 200ms"
}

CI 门禁：
□ 构建后统计 bundle 体积 → 超预算失败
□ bundle-buddy/size-limit 等工具接入
□ RUM 指标按版本对比（回归即告警）

// RUM（Real User Monitoring）：上报核心指标
import { onLCP, onINP, onCLS } from "web-vitals";

onLCP((metric) => report("web-vitals", metric));
onINP((metric) => report("web-vitals", metric));
onCLS((metric) => report("web-vitals", metric));

监控闭环：
采集（web-vitals）→ 上报（分析平台）→ 分位/分版本
→ 对比预算 → 告警 → 定位（source map）→ 优化 → 验证