性能与可观测

这一课你将能做到

1. 用 Lighthouse 和 next/bundle-analyzer 诊断性能瓶颈
2. 用动态导入 next/dynamic 实现组件级代码分割和懒加载
3. 用 next/script 控制第三方脚本的加载时机，避免阻塞主线程
4. 用 Vercel Speed Insights 和 Google Analytics 监控 Core Web Vitals
5. 理解 LCP、FID、CLS 三个核心指标，并有针对性地优化

为什么要学

性能差的网站直接等于收入损失：亚马逊统计每慢 100ms 转化率降 1%，Google 搜索排名把 Core Web Vitals 纳入算法。Next.js 给你了很多优化工具，但如果你不知道 LCP 是什么、<Script> 的 strategy 怎么选、bundle 里藏了多少重复代码，这些工具就白搭。

人话：性能优化不是「能跑就行」，而是「让服务器少干活、让用户少等待、让浏览器少卡顿」。监控则是「装摄像头」，让你知道哪里慢了、卡了、崩了。

先建立图像

Core Web Vitals 三剑客:
├── LCP (Largest Contentful Paint)  ←  首屏最大元素多久渲染（≤2.5s 优）
├── FID (First Input Delay) / INP   ←  用户第一次交互延迟（≤100ms 优）
└── CLS (Cumulative Layout Shift)   ←  页面布局偏移（≤0.1 优）

Next.js 性能优化工具箱:
├── next/image   → 自动压缩、WebP、懒加载
├── next/font    → 自托管字体，防布局偏移
├── next/dynamic → 按需加载组件
├── next/script  → 控制脚本加载策略
├── Suspense     → 流式渲染，减少白屏
└── 分包分析    → 找到 bundle 里的"大象"

跟着做

步骤 1：安装 bundle-analyzer

npm install -D @next/bundle-analyzer

next.config.ts：

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  // ... 其他配置
};

export default nextConfig;

package.json 加脚本：

{
  "scripts": {
    "analyze": "ANALYZE=true next build"
  }
}

Windows 用户用：

{
  "scripts": {
    "analyze": "set ANALYZE=true&&next build"
  }
}

执行 npm run analyze，构建完成后会自动打开浏览器，展示服务端和客户端的 bundle 组成。

步骤 2：动态导入和代码分割

app/page.tsx：

import dynamic from 'next/dynamic';
import { Suspense } from 'react';

// 默认懒加载，不打包进首屏 bundle
const HeavyChart = dynamic(() => import('./HeavyChart'), {
  ssr: false,        // 不在服务端渲染（如果有 DOM 操作）
  loading: () => <p>图表加载中…</p>,
});

export default function Home() {
  return (
    <main>
      <h1>首页</h1>
      <p>上方内容立刻显示</p>
      <Suspense fallback={<p>图表区域加载中…</p>}>
        <HeavyChart />
      </Suspense>
    </main>
  );
}

：