如何让 Lambda 体积直降 50MB拆解 nuxtjs/vercel-builder 多阶段构建与 node_modules 分离原理【免费下载链接】vercel-builderVercel Builder for Nuxt项目地址: https://gitcode.com/gh_mirrors/ve/vercel-builder对于 Nuxt 2 SSR 应用来说部署到 Serverless 平台最大的痛点就是 Lambda 体积一个普通的node_modules动辄上百 MB远超 Serverless 函数的 50MB 上限。本文拆解nuxtjs/vercel-builderVercel Builder for Nuxt如何用多阶段构建和node_modules 分离原理把 Lambda 体积直降 50MB 以上让你的 Nuxt 2 SSR 应用快速、自动扩展地运行在 Vercel 上。为什么 Lambda 会超标先建立一个直观认识。Nuxt 2 的依赖树极其庞大——nuxt主包本身只是入口背后拉着nuxt/core、nuxt/builder、Webpack 全家桶等数百个子依赖其中构建期依赖devDependencies在生产环境完全无用。如果直接npm install nuxt build然后把整个目录塞进 Lambda结果就是目录典型体积Lambda 是否需要node_modules含 dev200~400 MB❌ 绝大部分不需要node_modules仅生产50~80 MB⭕ 部分需要.nuxt/dist/server数 MB✅ 需要.nuxt/dist/client数 MB❌ 应走静态 CDNnuxtjs/vercel-builder在 src/config.ts 中明确声明了maxLambdaSize: 50mb的上限约束——这正是它一切体积优化设计的出发点所有最终进入 Lambda 的文件必须压缩到 50MB 以内。核心原理一node_modules 双份分离策略 这是体积直降的关键。构建流程见 src/build.ts执行了两次独立的依赖安装分别备份为两个目录阶段 1开发依赖全量安装node_modules_devinstall --productionfalse → 执行 nuxt build --standalone → 备份为 node_modules_dev此时需要完整的 devDependenciesWebpack、TypeScript 构建器等因为nuxt build本身是个重型构建过程。构建完成后backupNodeModules 把整个目录改名为node_modules_dev暂时移出 Lambda 打包范围。阶段 2生产依赖精简安装node_modules_prod在安装前preparePkgForProd 会做三件瘦身手术从 dependencies 中删除nuxt主包——Lambda 运行只需nuxt/core用同版本的nuxt/core替换砍掉大量构建期代码整段删除 devDependencies以--productiontrue重新安装到干净的node_modules。最终 Lambda 里只装入了node_modules_prod的内容build.ts 第 247-248 行。dev 与 prod 两份依赖互不污染这正是分离原理的字面含义。核心原理二多阶段构建流水线 ️整个构建被拆成 4 个可计时阶段每步耗时都打印在日志里Prepare build— 下载源码、检测 Node 版本、写入.npmrc支持私有 npm 模块Install devDependencies— 全量安装随后执行自定义vercel-build脚本如有Nuxt build— 运行nuxt build --standalonestandalone 模式让服务端产物自包含TypeScript 项目会先经过 src/typescript.ts 的预编译把nuxt.config.ts、serverMiddleware等 Webpack 不编译的文件用tsc提前转译Collect artifacts— 只收集必要产物Lambda 打包内容 ├── node_modules_prod → node_modules/ ├── .nuxt/dist/server → 服务端 bundle ├── vercel__launcher.js运行时入口 ├── nuxt.config.js 你的 serverFiles └── package.json精简版 静态输出不进 Lambda ├── static/ 目录 → 直接走 CDN └── .nuxt/dist/client → 以 publicPath 输出缓存一年Cache-Control: max-age31557600注意 build.ts 第 304-309 行 的路由规则客户端资源与静态文件全部带一年期的强缓存直接命中 CDN只有未命中的请求才落到 Lambda——Lambda 体积降了冷启动压力也降了。运行时入口 src/launcher.ts 用jiti加载 Nuxt 配置、实例化nuxt/core并把冷启动耗时打印为λ Cold start took: xxxms方便你监控优化效果。进阶原理跨构建缓存加速 ⚡体积优化解决了多大src/prepare-cache.ts 解决了多快每次构建结束后它把.nuxt、.vercel_cache内含 yarn 缓存、node_modules_dev、node_modules_prod全部收集进 Vercel 缓存。下一次构建时prepareNodeModules 直接复用上次安装好的依赖目录秒级跳过yarn install。 小贴士设置环境变量NUXT_CACHE_DISABLED1可禁用缓存官方强烈建议使用yarn因为其 autoclean 功能会进一步压缩 Lambda 体积项目自带 .yarnclean 规则文件安装时自动拷贝。实用技巧清单 优先选择 yarn 安装autoclean 会自动清理无用文件直接减少 Lambda 体积把server-middleware等文件通过serverFiles选项精确引入而不是整目录打包示例见 examples/basic/vercel.json开启generateStaticRoutes可预渲染的路径在构建期生成静态页Lambda 只兜底处理动态路由Monorepo 用户在项目设置中开启 Include source files outside of the Root Directory in the Build Step私有包通过NPM_AUTH_TOKEN/NPM_TOKEN构建环境变量注入构建完成会自动清理.npmrcbuild.ts 第 222-224 行避免凭证泄漏进产物。总结nuxtjs/vercel-builder的体积魔法可以浓缩为一句话用构建期全量安装 运行期生产安装的多阶段流水线把nuxt主包与 devDependencies 挡在 Lambda 之外再叠加静态资源 CDN 分流与跨构建缓存。理解这套原理后即使未来你迁移到 Nuxt 3Vercel 零配置部署面对任何 Serverless 平台的 Lambda 体积问题都能快速定位哪些依赖根本不该进产物这个核心矛盾。【免费下载链接】vercel-builderVercel Builder for Nuxt项目地址: https://gitcode.com/gh_mirrors/ve/vercel-builder创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 如何让 Lambda 体积直降 50MB：拆解 @nuxtjs/vercel-builder 多阶段构建与 node_modules 分离原理
如何让 Lambda 体积直降 50MB拆解 nuxtjs/vercel-builder 多阶段构建与 node_modules 分离原理【免费下载链接】vercel-builderVercel Builder for Nuxt项目地址: https://gitcode.com/gh_mirrors/ve/vercel-builder对于 Nuxt 2 SSR 应用来说部署到 Serverless 平台最大的痛点就是 Lambda 体积一个普通的node_modules动辄上百 MB远超 Serverless 函数的 50MB 上限。本文拆解nuxtjs/vercel-builderVercel Builder for Nuxt如何用多阶段构建和node_modules 分离原理把 Lambda 体积直降 50MB 以上让你的 Nuxt 2 SSR 应用快速、自动扩展地运行在 Vercel 上。为什么 Lambda 会超标先建立一个直观认识。Nuxt 2 的依赖树极其庞大——nuxt主包本身只是入口背后拉着nuxt/core、nuxt/builder、Webpack 全家桶等数百个子依赖其中构建期依赖devDependencies在生产环境完全无用。如果直接npm install nuxt build然后把整个目录塞进 Lambda结果就是目录典型体积Lambda 是否需要node_modules含 dev200~400 MB❌ 绝大部分不需要node_modules仅生产50~80 MB⭕ 部分需要.nuxt/dist/server数 MB✅ 需要.nuxt/dist/client数 MB❌ 应走静态 CDNnuxtjs/vercel-builder在 src/config.ts 中明确声明了maxLambdaSize: 50mb的上限约束——这正是它一切体积优化设计的出发点所有最终进入 Lambda 的文件必须压缩到 50MB 以内。核心原理一node_modules 双份分离策略 这是体积直降的关键。构建流程见 src/build.ts执行了两次独立的依赖安装分别备份为两个目录阶段 1开发依赖全量安装node_modules_devinstall --productionfalse → 执行 nuxt build --standalone → 备份为 node_modules_dev此时需要完整的 devDependenciesWebpack、TypeScript 构建器等因为nuxt build本身是个重型构建过程。构建完成后backupNodeModules 把整个目录改名为node_modules_dev暂时移出 Lambda 打包范围。阶段 2生产依赖精简安装node_modules_prod在安装前preparePkgForProd 会做三件瘦身手术从 dependencies 中删除nuxt主包——Lambda 运行只需nuxt/core用同版本的nuxt/core替换砍掉大量构建期代码整段删除 devDependencies以--productiontrue重新安装到干净的node_modules。最终 Lambda 里只装入了node_modules_prod的内容build.ts 第 247-248 行。dev 与 prod 两份依赖互不污染这正是分离原理的字面含义。核心原理二多阶段构建流水线 ️整个构建被拆成 4 个可计时阶段每步耗时都打印在日志里Prepare build— 下载源码、检测 Node 版本、写入.npmrc支持私有 npm 模块Install devDependencies— 全量安装随后执行自定义vercel-build脚本如有Nuxt build— 运行nuxt build --standalonestandalone 模式让服务端产物自包含TypeScript 项目会先经过 src/typescript.ts 的预编译把nuxt.config.ts、serverMiddleware等 Webpack 不编译的文件用tsc提前转译Collect artifacts— 只收集必要产物Lambda 打包内容 ├── node_modules_prod → node_modules/ ├── .nuxt/dist/server → 服务端 bundle ├── vercel__launcher.js运行时入口 ├── nuxt.config.js 你的 serverFiles └── package.json精简版 静态输出不进 Lambda ├── static/ 目录 → 直接走 CDN └── .nuxt/dist/client → 以 publicPath 输出缓存一年Cache-Control: max-age31557600注意 build.ts 第 304-309 行 的路由规则客户端资源与静态文件全部带一年期的强缓存直接命中 CDN只有未命中的请求才落到 Lambda——Lambda 体积降了冷启动压力也降了。运行时入口 src/launcher.ts 用jiti加载 Nuxt 配置、实例化nuxt/core并把冷启动耗时打印为λ Cold start took: xxxms方便你监控优化效果。进阶原理跨构建缓存加速 ⚡体积优化解决了多大src/prepare-cache.ts 解决了多快每次构建结束后它把.nuxt、.vercel_cache内含 yarn 缓存、node_modules_dev、node_modules_prod全部收集进 Vercel 缓存。下一次构建时prepareNodeModules 直接复用上次安装好的依赖目录秒级跳过yarn install。 小贴士设置环境变量NUXT_CACHE_DISABLED1可禁用缓存官方强烈建议使用yarn因为其 autoclean 功能会进一步压缩 Lambda 体积项目自带 .yarnclean 规则文件安装时自动拷贝。实用技巧清单 优先选择 yarn 安装autoclean 会自动清理无用文件直接减少 Lambda 体积把server-middleware等文件通过serverFiles选项精确引入而不是整目录打包示例见 examples/basic/vercel.json开启generateStaticRoutes可预渲染的路径在构建期生成静态页Lambda 只兜底处理动态路由Monorepo 用户在项目设置中开启 Include source files outside of the Root Directory in the Build Step私有包通过NPM_AUTH_TOKEN/NPM_TOKEN构建环境变量注入构建完成会自动清理.npmrcbuild.ts 第 222-224 行避免凭证泄漏进产物。总结nuxtjs/vercel-builder的体积魔法可以浓缩为一句话用构建期全量安装 运行期生产安装的多阶段流水线把nuxt主包与 devDependencies 挡在 Lambda 之外再叠加静态资源 CDN 分流与跨构建缓存。理解这套原理后即使未来你迁移到 Nuxt 3Vercel 零配置部署面对任何 Serverless 平台的 Lambda 体积问题都能快速定位哪些依赖根本不该进产物这个核心矛盾。【免费下载链接】vercel-builderVercel Builder for Nuxt项目地址: https://gitcode.com/gh_mirrors/ve/vercel-builder创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考