Résoudre le problème de mémoire de tas JavaScript insuffisante causée par vue 3 build + webpack

Question

Dans mon environnement de construction local, j'ai quelques répertoires dans le répertoire de base où réside ma configuration Webpack. Ces répertoires contiennent un certain nombre de fichiers (qui sont d'autres applications faisant partie de notre environnement de débogage).

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

J'ai utilisé exclude 来排除 dir1 和 dir2 mais cela n'a pas aidé. Si je supprime complètement ces répertoires, la construction se termine. Il semble donc que tout ce qui consomme toute la mémoire soit exécuté avant que les règles « d'exclusion » ne soient appliquées. Notez que je ne souhaite pas augmenter la limite de mémoire du nœud, je ne pense pas que ce soit le vrai problème. Je ne veux pas faire de magie avec des liens de fichiers logiques.

Des idées ?

Je soupçonne que le problème vient en fait du plugin vue-loader, mais je ne peux pas en être sûr car je ne vois aucune erreur autre que le dump, même si j'utilise l'indicateur "verbeux" dans webpack.

Ci-dessous la configuration de mon webpack (j'utilise grunt pour démarrer la build). exclude 和 include Chemin absolu vers un fichier à inclure (inclure) ou un répertoire à exclure (exclure). J'ai également essayé d'utiliser l'exclusion d'expressions régulières.

J'ai également ajouté les parties pertinentes de mon 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"
  }

Erreur :

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

Soit il y a trop de fichiers, soit les fichiers sont trop volumineux. La seule chose que vous pouvez faire est d'essayer d'augmenter le quota de mémoire en utilisant node 标志 --max-old-space-size.

Avant d'exécuter Webpack, utilisez les variables d'environnement pour définir les options de mémoire :

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

Ensuite, exécutez votre commande webpack. Alternativement, vous pouvez utiliser :

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