Solve the problem of insufficient JavaScript heap memory caused by vue 3 build + webpack

Question

In my local build environment, I have some directories in the base directory where my webpack configuration lives. These directories contain quite a few files (which are other applications that are part of our debugging environment).

node_modules/
src/
src/components
dir1/
dir2/
webpack.config.js
packages.json

I used exclude to exclude dir1 and dir2, but that didn't help. If I delete these directories completely, the build completes. So it seems like anything that consumes all the memory is run before the "exclude" rules are applied. Note that I'm not interested in increasing the node's memory limit, I don't think that's the real issue. I don't want to do some magic with logical file links.

Any ideas?

I suspect the problem is actually with the vue-loader plugin, but I can't be sure since I don't see any errors other than the dump, even if I use the "verbose" flag in webpack.

Below is my webpack configuration (I use grunt to start the build). exclude and include The absolute path to a file to include (include) or a directory to exclude (exclude). I also tried using regex exclusion.

I also added the relevant parts of my package.json

rules: [
        {
          test: /(\.ts$|\.js$)/,
          exclude,
          include,
          use: [
            {
              loader: 'ts-loader',
            },
          ],
        }, {
          exclude,
          test: /\.vue$/,
          use: 'vue-loader'
        }, {
          exclude,
          test: /\.css$/,
          use: ['vue-style-loader', 'css-loader']
        }

      ],

"devDependencies": {
    "css-loader": "^6.5.1",
    "@vue/compiler-sfc": "^3.2.29",
    "grunt": "^1.4.1",
    "grunt-bump": "^0.8.0",
    "grunt-cli": "^1.4.3",
    "grunt-webpack": "^5.0.0",
    "jsdom": "^19.0.0",
    "npm": "^8.3.2",
    "ts-loader": "^9.2.6",
    "typescript": "^4.5.4",
    "vue": "^3.2.29",
    "vue-loader": "^17.0.0",
    "vue-style-loader": "^4.1.3",
    "webpack": "^5.67.0"
  }

mistake:

<--- Last few GCs --->

[30416:000002A93B75B4D0]    82287 ms: Mark-sweep (reduce) 4094.2 (4101.3) -> 4093.9 (4103.1) MB, 2689.3 / 0.0 ms  (average mu = 0.091, current mu = 0.004) allocation failure scavenge might not succeed
[30416:000002A93B75B4D0]    86891 ms: Mark-sweep (reduce) 4094.9 (4105.1) -> 4094.6 (4105.6) MB, 4588.9 / 0.0 ms  (average mu = 0.037, current mu = 0.003) allocation failure scavenge might not succeed


<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
1: 00007FF7BD3E046F napi_wrap+109311

Answer 1

Either there are too many files, or the files are too large. The only thing you can do is try to increase the memory quota using the node flag --max-old-space-size.

Before running Webpack, use environment variables to set memory options:

// 8GB of memory
NODE_OPTIONS=--max_old_space_size=8192

Then run your webpack command. Alternatively, you can use:

node --max-old-space-size=8192 ./node_modules/webpack/bin/webpack.js