VueJS项目部署至Vercel时Serverless Function超出50MB大小限制的问题求助

Hey there! I know how frustrating it is to hit that size wall after spending hours troubleshooting deployment—you’re not alone with this common Nuxt + Vercel issue. Let’s break down actionable fixes step by step:

1. Trim Your serverFiles Configuration #

Looking at your Vercel config, including entire directories like config/** and locales/** is likely bloating your server bundle. These patterns pull in every file in those folders, even if your server doesn’t need them.

• Be specific with file patterns: Target only the files your server actually relies on instead of broad directory wildcards. For example:

  {
    "version": 2,
    "builds": [
      {
        "src": "nuxt.config.js",
        "use": "@nuxtjs/vercel-builder",
        "config": {
          "serverFiles": [
            "config/*.js", // Only include core JS config files, not docs/subdirs
            "locales/en.js", "locales/fr.js", // Only include active language files
            "mappers/**/*.js",
            "services/**/*.js",
            "helpers/**/*.js"
          ],
          "maxDuration": 60
        }
      }
    ]
  }
  

• Audit server-side necessity: Ask yourself if folders like locales need to live on the server at all. If you handle localization client-side, you can remove them from serverFiles entirely.

2. Clean Up Your Dependencies #

Unnecessary or misclassified dependencies are a top cause of bloated server bundles.

• Separate dev vs production dependencies: Ensure all development-only tools (like eslint, jest, or webpack-dev-server) are in devDependencies, not dependencies. Vercel skips packaging devDependencies for production, which can shave off significant size.
• Prune unused packages: Run npm prune --production or yarn install --production locally to see your production dependency tree. Delete any large packages you no longer use.
• Swap heavy libraries: If you’re using a bulky library for a small task, opt for lightweight alternatives. For example, use individual lodash methods (lodash.get) instead of the entire lodash package, or switch to a smaller utility library.

3. Analyze and Optimize Your Nuxt Build #

Use Nuxt’s built-in tools to pinpoint exactly what’s taking up space in your server bundle.

• Enable build analysis: Add this to your nuxt.config.js to generate a visual breakdown of your bundle:

  export default {
    build: {
      analyze: true // This opens a browser tab with a interactive size report
    }
  }
  

  The report will highlight the largest files/dependencies—you can then target those for trimming.
• Double-check tree-shaking: Nuxt enables tree-shaking by default, but make sure you’re not importing entire libraries when you only need specific functions (e.g., import { debounce } from 'lodash' instead of import _ from 'lodash').

4. Split Serverless Functions (Advanced) #

If trimming files and dependencies isn’t enough, split your server logic into smaller, separate Vercel functions instead of letting Nuxt bundle everything into one index function.

• For example, move Nuxt API routes to Vercel’s api directory—each file here becomes a standalone function, so each only includes the code it needs, keeping sizes under the 50MB limit.

Start with the first two fixes—they’re the quickest wins and often resolve the size issue right away. Let me know if you need help digging deeper into any of these steps!

内容的提问来源于stack exchange，提问作者Danilo.Micucci