Next.js 13模板构建及页面渲染耗时过长求助

一、构建耗时优化 #

• 排查服务端组件滥用
  确认纯UI组件是否被误标记为服务端组件（Next.js 13 App Router中async组件默认是服务端组件）。给所有仅做UI渲染的组件添加'use client'指令，避免服务端不必要的编译计算。
• 分析打包体积
  执行next build --debug生成构建分析报告，定位体积过大的依赖或重复模块。替换冗余依赖，比如用轻量化UI库替代全量引入的组件库，开启Tree Shaking（确保package.json中sideEffects配置正确）。
• 优化Next.js构建配置
  在next.config.js中启用SWC压缩、增量构建：

  module.exports = {
    swcMinify: true,
    incremental: true,
    // 若无需国际化，可注释或删除i18n配置
  };
  

二、页面导航渲染优化 #

• 拆分客户端/服务端组件
  将页面导航栏、通用UI等高频交互元素设为客户端组件（'use client'），仅把数据相关逻辑留在服务端组件，避免每次导航触发服务端重渲染。
• 启用静态生成
  对内容稳定的页面，使用generateStaticParams（App Router）生成静态页面，构建后直接从CDN加载：

  export async function generateStaticParams() {
    // 根据你的路由参数返回对应值，示例：
    return [{ slug: 'home' }, { slug: 'about' }];
  }
  

• 排查组件重渲染
  用React DevTools Profiler录制导航流程，定位频繁重渲染的组件。使用React.memo包裹纯组件，用useMemo/useCallback缓存计算结果和回调函数。
• 优化图片加载
  确保所有图片使用Next.js的next/image组件替代原生<img>，自动实现图片压缩、懒加载，减少页面加载耗时。

问题截图 #

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