在大型 React 应用中应对 Core Web Vitals

Source: Dev.to

请提供您希望翻译的完整文本内容，我将为您翻译成简体中文并保持原有的格式、Markdown 语法以及技术术语不变。谢谢！

介绍

一个包含多个 AI 工具、国际化（i18n）、开发者门户和主视觉滑块的庞大 React 单页应用，通常在 PageSpeed 评估中获得 Lighthouse 85，并显示“需要改进”的评级。主要罪魁祸首是庞大的 JavaScript 包、字体、i18n 资源以及抢占网络和主线程时间的首屏以上图片，这导致 LCP 变慢、布局偏移（CLS）以及交互迟缓（INP）。对资产的加载和渲染方式进行小幅、针对性的调整，就能显著提升性能。

优先加载 LCP 图像

Hero 图像通常是 LCP 候选。告诉浏览器以高优先级预加载它：

<!-- Example preload markup (replace with actual image URL) -->
<link rel="preload" as="image" href="/path/to/hero.jpg" fetchpriority="high">

• 第一张幻灯片（LCP）：loading="eager" 和 fetchpriority="high"。
• 后续幻灯片：loading="lazy"，仅在可见时加载。

优化字体加载

字体会阻塞文本渲染。预加载 WOFF2 文件并使用 font-display: swap 可以避免出现不可见的文字：

<link rel="preload" href="https://fonts.gstatic.com/s/inter/.../Inter.woff2" as="font" type="font/woff2" crossorigin>

@font-face {
  font-family: 'Inter';
  src: url('https://fonts.gstatic.com/s/inter/.../Inter.woff2') format('woff2');
  font-weight: 400;
  font-display: swap; /* 在字体加载完成前显示后备文字 */
}

防止布局位移

布局位移发生在内容在初始布局计算后才出现的情况。请提前预留空间。

对图像使用 aspect-ratio

{/* Image component */}
<img
  src={src}
  alt={alt}
  style={{ aspectRatio: `${width}/${height}` }}
  loading="eager"
  fetchpriority="high"
/>

• 始终为图像设置 width 和 height（或 aspect-ratio）。
• 包装器在图像加载前保持布局稳定。

延迟内容的占位符

{!isLoaded && (
  <div className="placeholder" style={{ width, height }} />
)}
<img
  src={src}
  onLoad={() => setIsLoaded(true)}
  style={{ opacity: isLoaded ? 1 : 0, transition: 'opacity 0.3s' }}
/>

• 占位符预留空间。
• 透明度过渡可避免视觉跳动。

懒加载路由和大型功能

// Lazy imports for AI tools, content pages, dashboards
const LazyFaceShapeDetector = lazy(() => import('../pages/ai-tools/FaceShapeDetector'));
const LazyDeveloperPortal   = lazy(() => import('../pages/DeveloperPortal'));

• 只加载当前路由所需的内容。
• 当主线程空闲时预取可能的下一个路由：

if ('requestIdleCallback' in window) {
  requestIdleCallback(() => {
    import('../pages/NextRoute');
  });
}

推迟非关键工作

• 将分析和次要 API 调用移出关键路径。
• 对于首次渲染不需要的任务，使用 requestIdleCallback 或轻量级调度器。

i18n 与代码分割

• 初始加载默认语言环境；按需懒加载其他语言环境。
• 使用 Vite 时，利用 manualChunks 将 vendor 包拆分，将 i18n 和 UI 库放在独立的块中。

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            if (id.includes('i18next')) return 'i18n';
            if (id.includes('react')) return 'react-vendor';
          }
        }
      }
    }
  }
});

测试与目标

• 在隐身窗口中运行 Lighthouse。
• 使用 WebPageTest 进行真实环境测试。
• 考虑使用 web‑vitals 库进行真实用户监控（RUM）。

核心 Web Vitals 目标

改进摘要

将这些模式应用于 FaceAura AI（一个使用 React、Vite 和 Express 构建的 AI 驱动的风格与分析应用），获得了显著的性能提升。相同的技术同样适用于任何大型 React 单页应用（SPA）。

快速入门

1. 确认并预加载 LCP（Largest Contentful Paint）图像。
2. 使用 font-display: swap 预加载字体。
3. 为首屏媒体添加 aspect-ratio/宽高属性和占位符。
4. 对路由和大型模块进行懒加载，在空闲时间预取可能的下一个路由。

这些步骤通常能在 Core Web Vitals 上带来最大的提升。