Vercel无服务函数超50MB限制：Next.js中Fabric依赖优化问题

一、缩减Fabric依赖体积（解决Vercel服务函数超容问题） #

1. 仅在客户端加载Fabric #

你的图片拖拽功能属于客户端交互，无需在服务器端（getServerSideProps）加载Fabric。用Next.js的动态导入将Fabric限制在客户端执行：

import dynamic from 'next/dynamic';

// 动态导入fabricjs-react，禁用服务端渲染
const FabricCanvas = dynamic(() => import('fabricjs-react'), {
  ssr: false,
});

// 在组件中使用FabricCanvas
export default function CanvasPage() {
  return <FabricCanvas />;
}

这种方式会让服务器端构建时完全跳过Fabric及其canvas依赖的打包，从根源解决服务函数体积超标的问题。

2. 清理服务器端不必要的Fabric导入 #

检查getServerSideProps代码，确保没有引入Fabric或相关依赖。如果只是做数据预取，完全不需要加载Fabric模块。

3. Webpack拆分Fabric代码（可选） #

如果客户端需要完整Fabric功能，可通过Webpack拆分Fabric独立chunk，避免影响主包加载速度：

// next.config.js
module.exports = {
  webpack: (config) => {
    config.optimization.splitChunks = {
      chunks: 'all',
      cacheGroups: {
        fabric: {
          test: /[\\/]node_modules[\\/]fabric[\\/]/,
          name: 'fabric-vendor',
          chunks: 'all',
        },
      },
    };
    return config;
  },
};

二、使用@napi-rs/canvas替代canvas的问题解决 #

1. Webpack别名替换 #

Fabric默认依赖canvas包，需通过Webpack别名将其指向@napi-rs/canvas，让Fabric自动使用替代包：

// next.config.js
module.exports = {
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      'canvas': '@napi-rs/canvas',
    };
    return config;
  },
};

2. 确保安装适配平台的二进制包 #

@napi-rs/canvas会根据系统自动下载对应二进制文件，Vercel构建环境为Linux，需确保安装流程正常：

• 删除node_modules和package-lock.json（或yarn.lock）
• 重新执行npm install（或yarn install）

3. 适配Fabric与@napi-rs/canvas的兼容性 #

Fabric v5对canvas包的API有特定依赖，@napi-rs/canvas部分API存在差异，可尝试以下调整：

• 在服务器端代码中手动导入@napi-rs/canvas并挂载到全局（如果Fabric依赖全局变量）：

  // 在getServerSideProps顶部添加
  const { createCanvas, Image } = require('@napi-rs/canvas');
  global.Canvas = createCanvas;
  global.Image = Image;
  

• 若仍有兼容性问题，可尝试降级Fabric到v4版本，或查找社区适配补丁。

4. 验证服务器端Fabric加载 #

如果getServerSideProps必须使用Fabric，确保在导入Fabric前完成@napi-rs/canvas的别名替换和全局挂载，避免模块查找错误。

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