Next.js项目首次页面加载耗时9-10秒，二次加载快问题求助

你遇到的首次加载9-10秒、二次导航极快的情况，核心原因是首次加载需要下载完整的客户端bundle、初始化React应用并渲染页面，而二次导航是Next.js的客户端路由（无需重新加载资源）。结合你的_app.js代码，给出以下针对性优化方案：

1. 修复Head组件的导入错误 #

你的代码中使用了<Head>但未导入，这会导致运行时错误，可能间接影响加载速度。立即补上导入：

import Head from 'next/head'; // 新增这行
import { useRouter } from 'next/router';
import { Sidenav } from '../components';

2. 懒加载Sidenav组件 #

非认证页面都会渲染Sidenav，如果这个组件包含大量UI元素或依赖第三方库，会显著增大首次加载的bundle体积。用Next.js的dynamic导入实现懒加载：

import dynamic from 'next/dynamic';
import { useRouter } from 'next/router';
import Head from 'next/head';

// 懒加载Sidenav，仅在需要时加载
const Sidenav = dynamic(() => import('../components/Sidenav'), {
  loading: () => <div className="sidenav-loading">加载中...</div>, // 可选加载态
  ssr: false // 如果Sidenav不需要服务端渲染，关闭ssr进一步优化
});

function MyApp({ Component, pageProps }) {
  // ... 原有代码不变
}

3. 分析并优化Bundle体积 #

首次加载慢的常见原因是bundle过大，用@next/bundle-analyzer定位大模块：

• 安装依赖：

  npm install @next/bundle-analyzer --save-dev
  

• 在next.config.js中配置：

  const withBundleAnalyzer = require('@next/bundle-analyzer')({
    enabled: process.env.ANALYZE === 'true',
  });
  module.exports = withBundleAnalyzer({});
  

• 运行分析命令：

  ANALYZE=true npm run build
  

根据分析报告，对体积大的依赖做以下优化：

• 替换体积过大的库（比如用轻量级UI组件替代全量组件库）
• 对非核心功能模块实现按需加载或懒加载

4. 优化静态资源与页面渲染 #

• 图片优化：所有图片改用Next.js的<Image>组件，自动实现压缩、懒加载和响应式适配
• 字体优化：对自定义字体使用font-display: swap，避免字体加载阻塞页面渲染；或使用Next.js的next/font模块预加载字体
• 数据请求优化：如果页面依赖后端数据，优先使用getStaticProps（静态生成）或getServerSideProps（服务端渲染），避免客户端首次加载时发起大量异步请求；客户端请求用SWR/React Query做缓存

5. 启用资源压缩 #

确保Next.js启用了gzip/brotli压缩，在next.config.js中确认配置：

module.exports = {
  compress: true, // 默认开启，确保未被禁用
};

内容的提问来源于stack exchange，提问作者Mangita