Vite 构建内存溢出：原因分析与解决方案

// ❌ 单个文件包含大量代码
// large-constants.ts - 10MB 的常量定义
export const HUGE_DATA = {
  // 几万行的静态数据...
}

// ❌ 生成的代码过大
// icon-bundle.ts - 包含所有 SVG 图标
export * from './icons/icon1'
export * from './icons/icon2'
// ... 几百个图标

// vite.config.ts
export default defineConfig({
  build: {
    // ❌ 最消耗内存：inline source map
    sourcemap: 'inline',
    
    // ⚠️ 较消耗内存：完整 source map
    sourcemap: true,
    
    // ✅ 较少内存：hidden source map
    sourcemap: 'hidden',
    
    // ✅✅ 最少内存：禁用
    sourcemap: false,
  },
})

// ❌ 错误示例：插件中的内存泄漏
const cache = new Map() // 全局缓存，永不清理

export default function leakyPlugin() {
  return {
    name: 'leaky-plugin',
    transform(code, id) {
      // 每次 transform 都往 cache 添加数据
      cache.set(id, {
        code,
        ast: parse(code),  // AST 很大！
        // ... 其他大对象
      })
      return code
    },
    // ❌ 没有 buildEnd 清理 cache
  }
}

// ❌ 错误：处理所有文件
export default function heavyPlugin() {
  return {
    name: 'heavy-plugin',
    transform(code, id) {
      // 对每个文件都执行重量级操作
      return heavyTransform(code)
    },
  }
}

// ✅ 正确：限制处理范围
export default function heavyPlugin() {
  return {
    name: 'heavy-plugin',
    transform(code, id) {
      // 只处理特定文件
      if (!id.endsWith('.special.ts')) return null
      return heavyTransform(code)
    },
  }
}

// ❌ 可能导致问题的配置
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          // 复杂的分包逻辑可能导致 Rollup 反复分析依赖
          if (id.includes('node_modules')) {
            const name = id.split('node_modules/')[1].split('/')[0]
            return `vendor-${name}` // 每个依赖一个 chunk
          }
        },
      },
    },
  },
})

// A.ts
import { b } from './B'
export const a = () => b()

// B.ts
import { a } from './A'
export const b = () => a()

// scripts/build-with-heap-snapshot.ts
import v8 from 'node:v8'
import fs from 'node:fs'
import { build } from 'vite'

async function buildWithSnapshot() {
  // 构建前快照
  v8.writeHeapSnapshot()
  
  await build()
  
  // 构建后快照
  v8.writeHeapSnapshot()
  
  console.log('Heap snapshots saved!')
}

buildWithSnapshot()

// vite.config.ts
export default defineConfig({
  build: {
    rollupOptions: {
      plugins: [
        {
          name: 'analyze-modules',
          buildEnd() {
            const moduleIds = this.getModuleIds()
            let count = 0
            for (const id of moduleIds) {
              count++
              const info = this.getModuleInfo(id)
              if (info && info.code && info.code.length > 100000) {
                console.log(`Large module: ${id} (${Math.round(info.code.length / 1024)}KB)`)
              }
            }
            console.log(`Total modules: ${count}`)
          },
        },
      ],
    },
  },
})

// vite.config.ts
import type { Plugin } from 'vite'

function wrapPluginWithMemoryTracking(plugin: Plugin): Plugin {
  const originalTransform = plugin.transform
  let callCount = 0
  
  return {
    ...plugin,
    transform(code, id) {
      callCount++
      if (callCount % 100 === 0) {
        const used = Math.round(process.memoryUsage().heapUsed / 1024 / 1024)
        console.log(`[${plugin.name}] ${callCount} files processed, Memory: ${used}MB`)
      }
      return originalTransform?.call(this, code, id)
    },
  }
}

export default defineConfig({
  plugins: [
    wrapPluginWithMemoryTracking(vue()),
    // ... 其他插件
  ],
})

// vite.config.ts
export default defineConfig({
  build: {
    // 方案 1：完全禁用（最省内存）
    sourcemap: false,
    
    // 方案 2：仅在需要时生成
    sourcemap: process.env.GENERATE_SOURCEMAP === 'true',
    
    // 方案 3：使用 hidden（不内联到产物中）
    sourcemap: 'hidden',
  },
})

// vite.config.ts
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        // ✅ 合理的分包策略
        manualChunks: {
          // 固定的 chunk 名称，避免动态计算
          'vendor-vue': ['vue', 'vue-router', 'pinia'],
          'vendor-ui': ['element-plus'],
        },
        
        // 或使用简单的函数
        // manualChunks(id) {
        //   if (id.includes('node_modules')) {
        //     return 'vendor'  // 所有依赖打包到一个 chunk
        //   }
        // },
      },
    },
    
    // 限制 chunk 大小警告阈值
    chunkSizeWarningLimit: 1000, // 1MB
  },
})

// vite.config.ts
import { viteExternalsPlugin } from 'vite-plugin-externals'

export default defineConfig({
  plugins: [
    viteExternalsPlugin({
      vue: 'Vue',
      'vue-router': 'VueRouter',
      'element-plus': 'ElementPlus',
      echarts: 'echarts',
    }),
  ],
})

// ❌ 全量引入
import * as echarts from 'echarts'

// ✅ 按需引入
import * as echarts from 'echarts/core'
import { BarChart, LineChart } from 'echarts/charts'
import { GridComponent, TooltipComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([BarChart, LineChart, GridComponent, TooltipComponent, CanvasRenderer])

// ❌ 一个巨大的常量文件
// constants.ts (5MB)
export const ALL_COUNTRIES = [/* 几万条数据 */]
export const ALL_CITIES = [/* 几万条数据 */]

// ✅ 拆分并动态加载
// countries.json (放到 public 目录)
// 在需要时 fetch 加载

// 或拆分成多个小文件
// constants/countries.ts
// constants/cities.ts

// vite.config.ts
export default defineConfig({
  build: {
    // esbuild 内存效率更高
    minify: 'esbuild',
    
    // 如果必须使用 Terser，限制并行度
    // minify: 'terser',
    // terserOptions: {
    //   maxWorkers: 2,  // 减少 worker 数量
    // },
  },
})

// scripts/build-in-stages.ts
import { build } from 'vite'

async function buildInStages() {
  // 阶段 1：构建核心模块
  await build({
    configFile: './vite.config.core.ts',
  })
  
  // 手动触发 GC（需要 --expose-gc 参数）
  if (global.gc) global.gc()
  
  // 阶段 2：构建业务模块
  await build({
    configFile: './vite.config.business.ts',
  })
}

buildInStages()

// vite.config.ts
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        // 合并小于 10KB 的 chunk
        experimentalMinChunkSize: 10 * 1024,
      },
    },
  },
})

// scripts/build-with-monitoring.ts
const startMemory = process.memoryUsage().heapUsed
const startTime = Date.now()

process.on('exit', () => {
  const endMemory = process.memoryUsage().heapUsed
  const duration = Date.now() - startTime
  
  console.log(`Build completed in ${duration}ms`)
  console.log(`Peak memory: ${Math.round(endMemory / 1024 / 1024)}MB`)
  
  // 设置阈值告警
  if (endMemory > 4 * 1024 * 1024 * 1024) {
    console.warn('⚠️ Warning: Memory usage exceeded 4GB!')
  }
})