Nuxt2 SSR通用应用部署Vercel报Serverless函数体积超50MB上限

Vercel 平台免费版对单个 Serverless 函数设置了 50MB 的压缩后体积硬上限，本地源码仅6MB不代表构建后的服务端函数包体积符合要求：Nuxt 2 默认的 SSR 构建逻辑会将全量服务端运行时代码、生产依赖，甚至误混入的开发依赖、缓存文件、静态资源全部打包到对应路由的 Serverless 函数中，很容易突破体积限制。触发本次报错的原因是首页对应的index函数打包后体积达到124.58MB，超出平台限制。

对应报错信息：

Error: The Serverless Function "index" is 124.58mb which exceeds the maximum size limit of 50mb.

涉及项目：NuxtBnB 仓库

按优先级从高到低尝试，第一种方案可解决90%以上的Nuxt2部署体积超限问题：

• 安装Nuxt官方适配的Vercel构建器，自动完成依赖裁剪和Tree-Shaking
  1. 执行命令安装开发依赖：npm install -D @nuxtjs/vercel-builder
  2. 在项目根目录新建vercel.json配置文件，写入如下配置，指定用官方适配构建器替换Vercel默认的通用Node.js构建逻辑：

  {
    "builds": [
      {
        "src": "nuxt.config.js",
        "use": "@nuxtjs/vercel-builder",
        "config": {
          "serverFiles": ["package.json"]
        }
      }
    ]
  }
  

  该构建器会自动剔除开发依赖、未引用的依赖模块、本地缓存文件，常规Nuxt2项目配置完后函数体积通常能控制在20MB以内。
• 手动排查裁剪冗余体积，适配特殊场景
  配置官方构建器后体积仍然超限的，按如下步骤排查：
  1. 执行npx nuxt build --analyze启动构建体积分析工具，定位服务端bundle中占比最高的模块，优先替换重型依赖：比如用dayjs替换moment、按需引入UI组件库替换全量引入、删除未实际使用的工具包/SDK
  2. 检查根目录.vercelignore文件，确保.nuxt缓存目录、node_modules目录、测试用例、本地大文件都被排除，不会被打进函数包；存放在static目录的静态资源会自动走Vercel CDN分发，不会占用Serverless函数体积，不要把静态资源放到服务端代码目录下
  3. 在nuxt.config.js的build配置项中，将不需要打包进服务端bundle的重型第三方依赖加入externals列表，减少单包体积
• 调整部署配置适配特殊需求
  项目确实需要保留重型服务端依赖、无法进一步裁剪的，可选择两种方案：
  1. 升级Vercel Pro套餐，该套餐单个Serverless函数体积上限提升至100MB，对当前124MB的包做简单裁剪即可满足要求
  2. 将重型服务端逻辑从SSR主函数中拆分，部署为独立的Edge Function，Edge Function体积限制更宽松，冷启动速度也优于普通Serverless函数

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