Vercel Serverless Function 上的 Node-Canvas - Serverless Function 超过最大大小 50mb

Question

在我的 Next.js 项目中，我使用 Fabric 和 Fabricjs-React 作为 Fabric 的包装器，以允许用户将图像拖放到我的画布中。现在，fabric 的依赖项之一恰好是

node_modules/canvas/build

，它的压缩大小为 42.82 MB。我尝试使用

@napi-rs/canvas

替换 package.json 中的

canvas

包，但它导致

Error: Cannot find module '../build/Release/canvas.node'

。我正在尝试在我相关的页面中使用

getServerSideProps

。但它只会导致 Vercel 上的构建错误。我正在使用 12.3.1 版本的

next

以及

5.3.0

版本的

fabric

和

2.11.2

版本的

canvas

软件包。

有什么方法可以减少这个依赖项的大小或者只导入我在此 API 路径中需要的包的部分吗？如果使用

@napi-rs/canvas

是一种解决方法，我该如何解决

Error: Cannot find module '../build/Release/canvas.node'

。由织物给出？

Answer 1

我遇到了类似的问题，并找到了一种不会破坏我的情况下的 Fabricjs 功能的解决方法。

使用以下内容更新您的 next.config.js：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "**",
      },
    ],
  },
  experimental: {
    legacyBrowsers: false,
    outputFileTracingExcludes: ['**canvas**']
  },
  webpack: (config) => {
    config.externals = [...config.externals, "canvas", "jsdom"]
    return config
  }
}

module.exports = nextConfig

这里添加的关键是

outputFileTracingExcludes: ['**canvas**']

，它在构建过程中排除了画布依赖项。在我的测试中，这并没有破坏任何 Fabricjs 功能。确保在您的用例中对其进行彻底测试。我希望这有帮助。