使用Vite构建时遇JavaScript堆内存不足问题（关联unplugin-vue-components）

错误详情 #

构建时抛出以下内存溢出错误：

<--- Last few GCs --->

[23466:0x5e196b0]    37408 ms: Mark-sweep (reduce) 489.9 (502.1) -> 488.2 (501.6) MB, 1271.9 / 0.0 ms  (+ 3.8 ms in 6 steps since start of marking, biggest step 1.3 ms, walltime since start of marking 1318 ms) (average mu = 0.368, current mu = 0.040) allo[23466:0x5e196b0]    38726 ms: Mark-sweep (reduce) 490.5 (503.2) -> 489.9 (503.1) MB, 1315.0 / 0.0 ms  (average mu = 0.220, current mu = 0.002) allocation failure GC in old space requested


<--- JS stacktrace --->

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
 1: 0xb06730 node::Abort() [node]
 2: 0xa1b6d0  [node]
 3: 0xce1dd0 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [node]
 4: 0xce2177 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node]
 5: 0xe997e5  [node]
 6: 0xea94ad v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node]
 7: 0xeac1ae v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [node]
 8: 0xe6d6ea v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [node]
 9: 0x11e658c v8::internal::Runtime_AllocateInOldGeneration(int, unsigned long*, v8::internal::Isolate*) [node]
10: 0x15da0d9  [node]
Aborted (core dumped)

当前Vite配置 #

vite.config.js内容如下：

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";
import Components from "unplugin-vue-components/vite";
import { PrimeVueResolver } from "unplugin-vue-components/resolvers";

export default defineConfig({
    plugins: [
        Components({
            resolvers: [PrimeVueResolver()]
        }),
        laravel({
            input: "resources/js/app.js",
            refresh: true
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false
                }
            }
        })
    ]
});

问题定位 #

移除unplugin-vue-components插件的配置后，构建可正常完成，说明内存溢出与该插件（尤其是PrimeVueResolver自动扫描组件的逻辑）直接相关。

解决办法 #

• 提升Node.js内存限制：在构建命令中增加内存分配参数，比如给Node.js分配8GB内存

  node --max-old-space-size=8192 vite build
  

  或者修改package.json中的scripts：

  {
    "scripts": {
      "build": "node --max-old-space-size=8192 vite build"
    }
  }
  

• 优化组件扫描范围：限定unplugin-vue-components只扫描指定目录，避免全局遍历带来的内存开销

  Components({
      resolvers: [PrimeVueResolver()],
      // 只扫描项目自身的组件目录
      dirs: ['resources/js/components']
  }),
  

• 更新插件版本：检查并更新unplugin-vue-components和primevue相关包到最新版本，可能旧版本存在内存泄漏问题

  npm update unplugin-vue-components primevue
  

• 临时切换为手动导入组件：如果自动导入的内存问题无法快速解决，可以暂时改为手动引入PrimeVue组件

  // 在需要的组件中手动导入
  import Button from 'primevue/button';
  
  export default {
      components: {
          Button
      }
  }
  

内容的提问来源于stack exchange，提问作者oliverbj