Selesaikan masalah memori timbunan JavaScript yang tidak mencukupi yang disebabkan oleh vue 3 build + webpack

Question

Dalam persekitaran binaan tempatan saya, saya mempunyai beberapa direktori dalam direktori asas tempat konfigurasi pek web saya berada. Direktori ini mengandungi beberapa fail (iaitu aplikasi lain yang merupakan sebahagian daripada persekitaran penyahpepijatan kami).

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

Saya menggunakan exclude 来排除 dir1 和 dir2 tetapi itu tidak membantu. Jika saya memadamkan direktori ini sepenuhnya, binaan akan selesai. Jadi nampaknya apa-apa sahaja yang menggunakan semua memori dijalankan sebelum peraturan "kecualikan" digunakan. Ambil perhatian bahawa saya tidak berminat untuk meningkatkan had ingatan nod, saya tidak fikir itu isu sebenar. Saya tidak mahu melakukan sihir dengan pautan fail logik.

Ada idea?

Saya mengesyaki masalah sebenarnya adalah dengan pemalam vue-loader, tetapi saya tidak pasti kerana saya tidak melihat sebarang ralat selain daripada pembuangan, walaupun saya menggunakan bendera "verbose" dalam webpack.

Di bawah ialah konfigurasi webpack saya (saya menggunakan grunt untuk memulakan binaan). exclude 和 include Laluan mutlak ke fail untuk disertakan (disertakan) atau direktori untuk dikecualikan (dikecualikan). Saya juga cuba menggunakan pengecualian regex.

Saya juga menambah bahagian yang berkaitan pada pakej saya.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"
  }

Ralat:

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

Sama ada terlalu banyak fail atau fail terlalu besar. Satu-satunya perkara yang boleh anda lakukan ialah cuba meningkatkan kuota memori menggunakan node 标志 --max-old-space-size.

Sebelum menjalankan Webpack, gunakan pembolehubah persekitaran untuk menetapkan pilihan memori:

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

Kemudian jalankan arahan webpack anda. Sebagai alternatif, anda boleh menggunakan:

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