使用Vite的Laravel+Vue.js项目npm run build时CPU及内存问题求助

一、直接增加Node.js堆内存分配 #

临时单次生效方案 #

执行构建命令时，通过--max-old-space-size参数指定内存上限（单位为MB，示例分配4GB内存）：

node --max-old-space-size=4096 node_modules/vite/bin/vite.js build

永久配置方案（修改npm脚本） #

打开项目根目录的package.json，修改scripts中的build命令：

"scripts": {
    "dev": "vite",
    "build": "node --max-old-space-size=4096 node_modules/vite/bin/vite.js build",
    "preview": "vite preview"
}

之后直接执行npm run build，会自动应用配置的内存上限。

二、Vite构建优化（降低CPU与内存消耗） #

除扩容内存，可通过Vite配置减少资源占用：

• 组件按需加载：确保Vue组件使用import()动态导入，避免一次性打包所有组件
• 优化依赖预构建：在vite.config.js中调整optimizeDeps配置，拆分或排除部分依赖：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    optimizeDeps: {
        exclude: ['大型但低频使用的依赖包'],
        include: ['项目核心依赖']
    },
    build: {
        chunkSizeWarningLimit: 1000,
        rollupOptions: {
            output: {
                // 将第三方依赖拆分为独立chunk，减少单文件体积
                manualChunks(id) {
                    if (id.includes('node_modules')) {
                        return id.toString().split('node_modules/')[1].split('/')[0].toString();
                    }
                }
            }
        },
        // 生产环境关闭源映射，大幅降低内存占用
        sourcemap: false
    }
});

三、系统层面辅助优化 #

• 关闭后台闲置的高资源占用程序，为构建过程预留更多CPU与内存
• 多核CPU环境无需额外配置，Vite默认会利用多核资源并行构建

内存泄漏排查（可选） #

若调整后仍存在问题，可通过以下命令开启调试，用Chrome DevTools分析内存使用：

node --inspect --max-old-space-size=4096 node_modules/vite/bin/vite.js build

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