How to decrease memory use during vite/pnpm build?

Question

I am running a build for a large project using pnpm and Vite, but it keeps failing with out of memory errors.

I have already tried increasing the Node memory limit significantly (to ~12GB), but it still crashes:

NODE_OPTIONS="--max-old-space-size=12288" pnpm build

I'm doing a whole bunch of dynamic imports and manual chunking. I've also stripped my vite.config.js down to the bare minimum to rule out plugin issues.

FYI I cannot disable sourcemap generation (i.e. setting sourcemap: false is not an option as I need them for debugging).

Are there other specific Vite configurations, Rollup options, or pnpm strategies I can use to decrease the memory footprint during the build?

• Estus Flask: Did you try to switch to npm to see if this makes any difference? I'd expect there will be none
• Shravan: @EstusFlask Tried that. Didn't make a difference, as expected :(

Answer 1

You can use esbuild minifier. esbuild minification is Vite’s default for dev and recommended for production for speed and memory efficiency.

build: {
 target: 'esnext',
 minify: 'esbuild',
 sourcemap: true,
}

Also, you should configure Vite’s disk cache (cacheDir) to avoid redundant work in rebuilds:

build: {
 cacheDir: '.vite-cache',
}

You should also consider using import() calls instead of having large sync imports:

const BigComponent = () => import('./BigComponent.vue') instead of import BigComponent from './BigComponent.vue'

And finally, try to use build.rollupOptions.output.manualChunks to break your bundle into smaller pieces. Moving heavy vendors like React, lodash, into separate chunks reduces peak memory pressure during build.

vite.config.js

import { defineConfig } from 'vite'
export default defineConfig({
 build: {
 rollupOptions: {
 output: {
 manualChunks(id) {
 if (id.includes('node_modules')) {
 if (id.includes('react') || id.includes('react-dom')) return 'react-vendor'
 if (id.includes('lodash') || id.includes('date-fns')) return 'utils-vendor'
 return 'vendor'
 }
 },
 },
 },
 },
})

• Shravan: Thanks for the answer. I should have mentioned in the OP that I'm already doing a whole bunch of dynamic imports and manual chunking. As for esbuild minification, I think esbuild is the default as setting minify to it explicitly made no difference at all. And cacheDir isn't super useful for me as my builds happen on on-demand VMs with no persistence.