Vercel build size vs local build size is different

Question

I'm using Vercel to deploy my Nuxt project (via gitlab) and recently my build fails with error message

"The serverless function "index" is 119.68 mb which exceeds the maximum size limit of 50mb."

It's kinda strange because when I tried to build it locally my dist folder is only about 7.92MB. Does anyone have the same problem? How do you trace the size of your Nuxt project in a Vercel build? What causing the local build to be different than the one pushed to Vercel?

I've tried to build it locally and turns out it only 7.92 MB, isn't the build should be the same to the one pushed to Vercel?

Here is my nuxt.config.js

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'maimbau',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Server Configuration
  server: {     
    port: 8000, // default: 3000     
    host: 'localhost', // default: localhost   
  },   // other configs 

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    { src: '@/plugins/vue-awesome-swiper', mode: 'client' },
    { src: "@/plugins/aos", ssr: false }
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    '@nuxtjs/eslint-module',
    // https://go.nuxtjs.dev/stylelint
    '@nuxtjs/stylelint-module',
    // https://go.nuxtjs.dev/tailwindcss
    '@nuxtjs/tailwindcss',
  ],

  tailwindcss: {
    configPath: 'tailwind.config.js',
    exposeConfig: false,
    config: {},
    injectPosition: 0,
  },

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
  ],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {},

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    postcss: {
      plugins: {
        tailwindcss: {},
        autoprefixer: {},
        "postcss-custom-properties": false
      },
    },
  },
  buildDir: 'dist',
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        name: 'demo_recipient',
        path: '/demo/undangan/:theme/:greeting/:recipient',
        component: resolve(__dirname, 'pages/demo/undangan/_theme.vue')
      }),
      routes.push({
        name: 'webview_recipient',
        path: '/:catin/:greeting/:recipient',
        component: resolve(__dirname, 'pages/_catin/index.vue')
      })
    }
  }
}

And my package.json

{
  "name": "maimbau",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt --hostname 0.0.0.0 --port 8000",
    "build": "nuxt build",
    "start": "nuxt start",
    "dev:local": "nuxt",
    "analyze": "nuxt build --analyze",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint:style": "stylelint \"**/*.{vue,css}\" --ignore-path .gitignore",
    "lint": "npm run lint:js && npm run lint:style"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.6",
    "aos": "^2.3.4",
    "core-js": "^3.15.1",
    "firebase": "^9.8.0",
    "nuxt": "^2.15.8",
    "swiper": "^5.4.5",
    "vue-awesome-swiper": "^4.1.1",
    "vue-sweetalert2": "^5.0.2",
    "vue-tailwind-modal": "^1.0.7"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.14.7",
    "@nuxtjs/eslint-config": "^6.0.1",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/stylelint-module": "^4.0.0",
    "@nuxtjs/tailwindcss": "^4.2.1",
    "eslint": "^7.29.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-vue": "^7.12.1",
    "postcss": "^8.3.5",
    "prettier": "^2.3.2",
    "stylelint": "^13.13.1",
    "stylelint-config-prettier": "^8.0.2",
    "stylelint-config-standard": "^22.0.0"
  }
}

Answer 1

I stumbled upon this issues in github https://github.com/nuxt/vercel-builder/issues/633 I just specify the version of vercel builder in vercel.json from:

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

to:

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

and it works like charm!