为什么依赖关系很重要？立即将您的 Nuxt SSR（通用）应用部署到 Vercel。

关于如何将 Nuxt 应用程序部署到 Vercel，有很多说明。然而，对于设置要求更高的用户来说，快速部署 Nuxt 应用程序会比较困难。其中一个设置是universal允许使用服务器端渲染的模式，这可能有点棘手。

我想要立即部署！

对于那些来这里寻求快速部署应用程序帮助的人来说，有两个简单的步骤。

1. 在Vercel上创建一个帐户并授予对您的存储库的访问权限。

2. now.json在项目根目录中添加文件：
   

{
  "version": 2,
  "builds": [
    {
      "src": "nuxt.config.js",
      "use": "@nuxtjs/now-builder",
      "config": {}
    }
  ]
}

基本上就是这样。现在 Builder会处理其他所有事情，推送完成后，Vercel 就开始部署。

但此时，您可能会遇到两个问题。

第一个问题是build脚本未被调用 - 现在构建器会自行运行nuxt build步骤，这可能会让您感到困扰。解决方案是将now-build脚本添加到您的构建器中，并在脚本被调用package.json之前执行任何您想做的事情。nuxt build

另一个更难——Vercel 上的应用程序部署终止并显示以下消息：

错误：无服务器函数“索引”为 82.5mb，超出了 50mb 的最大大小限制。

你肯定在想——这是什么鬼？我写了一个轻量级的 Nuxt 应用，怎么会占用这么多空间？

这就是我开始写这篇文章的真正原因，所以我稍后会思考这个问题，现在该如何解决这个问题？

我喜欢简单的技巧，它们能带来巨大的改变，这是其中之一。

将所有内容移至dependencies，devDependencies删除yarn.lock文件（或package-lock.json），然后运行yarn（或npm install）重新生成一个新文件。提交、推送，就完成了。

作为示例，这里是存储库，我想将Shopware PWA部署到 Vercel，但任何具有universal模式的 Nuxt 项目都可以工作。

你可能会想，为什么dependencies搬进devDependencies

所以如果你还在读，我们将更深入地探讨这个主题。当你学习依赖项和 devDependencies 时，总体解释是，dependencies应该用于运行时所需的包，并且devDependencies应该包含仅用于开发环境的包。

轻松、简单、清晰，但是……

我们需要在运行时使用依赖项是什么意思？

通常，这意味着我们require('some-package')的代码中存在类似这样的内容。Node 会node_modules在运行时搜索该包并将其引入。因此，你可以将 Node 应用程序部署到服务器，运行npm install --production后 npm 只会加载node_modules来自 的包dependencies以及它们的包dependencies（当然，这是运行时所必需的），等等……众所周知，这可能会非常庞大​​。在服务器上的 Node 应用程序上node_modules运行标志是有意义的。--production

然而，现代 Web 应用程序已不再如此。我们现在使用打包器，使用 ESM 模块，并通过导入而不是强制导入。Nuxt 在底层使用 Webpack，因此应用程序运行所需的一切都经过静态分析，传播成块并转换到build/dist目录。不再需要node_modules运行时调用。

所有依赖项devDependencies仅在构建应用程序期间使用。

Vercel 也遵循这些规则。这就是为什么即使你构建的应用程序只有几 MB，它也会显示巨大的体积——假设你的dependency设置是在运行时使用的，所以它也是应用程序大小的一部分。

那么我应该何时dependencies在我的 Web 应用程序中使用？

永远不会 :) 大多数时候这并不重要；大多数应用甚至不使用SSR，只是简单地将构建dist文件夹上传到 CDN。而且，无论哪种方式，构建时都需要加载所有依赖项。

对图书馆作者的一点提醒

您放入软件包的所有内容dependencies都会随安装一起加载。这似乎显而易见，但有时人们会忘记这一点。这并不是说您不应该在那里添加任何内容，而是应该立即构建库以包含所有必要的依赖项。这会导致代码重复，因为打包器无法区分这是您自己的代码还是项目中使用的其他库。没有人希望出现这种情况。对此有一个简单的规则。

我的库需要用户安装依赖项 X —— 如果是这样，我们不想在quick start部分中写“安装 X、Y、Z 才能运行”。我们将它们添加到dependencies部分中，直到需要它们运行你的库时，它们才会出现在这个部分中。

贡献者可以如何提供帮助？

深入研究开源项目。查看其软件包的依赖项部分。用代码来验证它们。这通常不需要深入的项目知识。或许可以尝试Bundlephobia，看看这些依赖项中是否有更轻量级的替代方案Similar Packages。

尝试通过提交 PR 来提供帮助。如果情况复杂，您可以创建一个 Issue 来讨论您的发现。任何形式的羞辱都是没有意义的your package has this HUGE dependency。请保持礼貌；每个人都在尽力而为。