Lösen Sie das Problem des unzureichenden JavaScript-Heapspeichers, der durch Vue 3 Build + Webpack verursacht wird

Question

In meiner lokalen Build-Umgebung habe ich einige Verzeichnisse im Basisverzeichnis, in denen sich meine Webpack-Konfiguration befindet. Diese Verzeichnisse enthalten eine ganze Reihe von Dateien (bei denen es sich um andere Anwendungen handelt, die Teil unserer Debugging-Umgebung sind).

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

Ich habe exclude 来排除 dir1 和 dir2 verwendet, aber das hat nicht geholfen. Wenn ich diese Verzeichnisse vollständig lösche, ist der Build abgeschlossen. Es scheint also, dass alles, was den gesamten Speicher verbraucht, ausgeführt wird, bevor die „Ausschluss“-Regeln angewendet werden. Beachten Sie, dass ich nicht daran interessiert bin, das Speicherlimit des Knotens zu erhöhen. Ich glaube nicht, dass das das eigentliche Problem ist. Ich möchte nicht mit logischen Dateiverknüpfungen zaubern.

Irgendwelche Ideen?

Ich vermute, dass das Problem tatsächlich beim Vue-Loader-Plugin liegt, aber ich kann nicht sicher sein, da ich außer dem Dump keine Fehler sehe, selbst wenn ich das „verbose“-Flag im Webpack verwende.

Unten ist meine Webpack-Konfiguration (ich verwende Grunt, um den Build zu starten). exclude 和 include Absoluter Pfad zu einer einzuschließenden Datei (include) oder einem auszuschließenden Verzeichnis (exclude). Ich habe auch versucht, den Regex-Ausschluss zu verwenden.

Ich habe auch die relevanten Teile meiner package.json hinzugefügt

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

Fehler:

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