通过GitHub部署Nexjs应用至Azure时遇函数内容过大错误求助

核心优化方向：缩小构建产物体积，排除冗余文件 #

1. 优化Next.js构建配置

修改next.config.js，启用压缩、禁用冗余追踪功能，减少输出体积：

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 开启Gzip压缩
  compress: true,
  // 若使用外部图床，关闭本地图片优化以减少产物
  images: {
    unoptimized: true,
  },
  // 禁用文件追踪，避免打包冗余依赖文件
  experimental: {
    outputFileTracing: false,
  },
  // 启用CSS优化（Next.js 12+支持）
  optimizeCss: true,
}

module.exports = nextConfig

2. 清理生产依赖与构建缓存

• 部署前仅安装生产依赖，避免dev依赖占用空间：

  npm ci --only=production
  # 或yarn用户执行
  yarn install --production --frozen-lockfile
  

• 清理Next.js构建缓存，避免旧文件堆积：

  rm -rf .next/cache
  

3. 排除不必要的部署文件

在项目根目录创建/修改staticwebapp.config.json，指定需要排除的文件：

{
  "exclude": [
    ".next/cache/**",
    "node_modules/**",
    "tests/**",
    "*.log",
    "*.md"
  ]
}

同时确保.gitignore已包含.next/cache、node_modules等冗余目录，避免Git仓库冗余。

4. 减少依赖包体积

• 用npm ls --depth=0或yarn list --depth=0排查体积过大的依赖，替换为轻量替代（例如用lodash-es替代lodash，date-fns替代moment）。
• 执行依赖去重，减少重复依赖占用空间：

  npm dedupe
  # 或yarn用户执行
  yarn dedupe
  

5. 调整部署模式（静态导出/分离API路由）

• 静态导出：如果你的应用不需要SSR/SSG，改用静态导出模式，产物体积会大幅缩小。修改next.config.js添加output: 'export'，然后执行npm run build生成out目录，在SWA部署时指定output_location: "out"。
• 分离API路由：若必须使用API路由，将API部分单独部署到Azure Functions，SWA仅托管静态内容，规避SWA的函数体积限制。

6. 检查构建产物体积

部署前用命令查看产物大小，定位体积过大的目录：

# 查看.next目录大小
du -sh .next
# 若用静态导出，查看out目录大小
du -sh out

针对性优化大体积目录（例如压缩图片、移除未使用的静态资源）。

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