解决vue 3构建+webpack导致JavaScript堆内存不足的问题

Question

在我的本地构建环境中，我的 webpack 配置所在的基本目录中有一些目录。这些目录包含相当多的文件（它们是属于我们调试环境一部分的其他应用程序）。

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

我使用 exclude 来排除 dir1 和 dir2，但这没有帮助。如果我完全删除这些目录，构建就会完成。因此，似乎消耗所有内存的任何内容都在应用“排除”规则之前运行。请注意，我对增加节点的内存限制不感兴趣，我认为这不是真正的问题。我不想对逻辑文件链接做一些魔术。

有什么想法吗？

我怀疑问题实际上出在 vue-loader 插件上，但我不能确定，因为除了转储之外我没有看到任何错误，即使我在 webpack 中使用“verbose”标志也是如此。

下面是我的 webpack 配置（我使用 grunt 来启动构建）。 exclude 和 include 包含文件（包含）或要排除（排除）的目录的绝对路径。我还尝试使用正则表达式排除。

我还添加了我的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"
  }

错误：

<--- 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

要么文件太多，要么文件太大。您唯一能做的就是尝试使用 node 标志 --max-old-space-size 增加内存配额。

在运行 Webpack 之前，使用环境变量设置内存选项：

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

然后运行您的 Webpack 命令。或者，您也可以使用：

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