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

# 查看当前 Node.js 内存限制
node -e "console.log(v8.getHeapStatistics().heap_size_limit / 1024 / 1024 + ' MB')"

V8 堆内存
├── 新生代 (New Space) - 短生命周期对象
│   ├── From Space
│   └── To Space
├── 老生代 (Old Space) - 长生命周期对象
│   ├── Old Pointer Space - 包含指针的对象
│   └── Old Data Space - 只包含数据的对象
├── 大对象空间 (Large Object Space) - 超过阈值的大对象
├── 代码空间 (Code Space) - JIT 编译的代码
└── Map 空间 (Map Space) - 对象的隐藏类

# 典型的 OOM 错误信息
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

# 或者
<--- Last few GCs --->
[12345:0x...] 12345 ms: Mark-sweep 1398.2 (1425.6) -> 1398.1 (1425.6) MB, 1523.5 / 0.0 ms ...
...
<--- JS stacktrace --->

Vite Build 内存消耗分布
│
├── 1. 配置解析 (~50MB)
│   └── 加载 vite.config.ts、解析插件配置
│
├── 2. 依赖扫描 (~100-300MB)
│   └── 扫描所有 import 语句，构建依赖图
│
├── 3. 模块转换 (~200-500MB) ⚠️ 高内存消耗
│   ├── AST 解析（每个文件生成 AST）
│   ├── 插件 transform 钩子执行
│   └── TypeScript/JSX 转换
│
├── 4. Bundle 生成 (~300-800MB) ⚠️ 最高内存消耗
│   ├── Rollup 模块解析和打包
│   ├── Tree Shaking 分析
│   └── 代码分割计算
│
├── 5. 代码压缩 (~200-500MB) ⚠️ 高内存消耗
│   ├── Terser/esbuild 压缩
│   └── Source Map 生成
│
└── 6. 文件写入 (~50MB)
    └── 输出到 dist 目录

内存使用
^
|           ___________
|          /           \
|         /  Bundle     \______
|        / Generation          \
|   ____/                       \____
|  /  Module Transform    Minify     \
| /                                   \
|/_____________________________________|______> 时间
  配置解析  依赖扫描  转换  打包  压缩  写入

# 统计项目模块数量
find src -name "*.vue" -o -name "*.ts" -o -name "*.tsx" -o -name "*.js" | wc -l

# 统计 node_modules 中被引用的模块
npx vite build --debug 2>&1 | grep "resolved" | wc -l

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

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

# 分析依赖体积
npx vite-bundle-visualizer

# 或使用 npm 分析
npm ls --all --json | npx bundle-phobia

# 检查重复依赖
npm ls lodash
# 可能输出：
# ├── lodash@4.17.21
# ├─┬ package-a
# │ └── lodash@4.17.20
# └─┬ package-b
#   └── lodash@4.17.19

// 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();

# 方法 1：使用 Node.js 内置
node --expose-gc -e "
const { build } = require('vite')
const used = () => Math.round(process.memoryUsage().heapUsed / 1024 / 1024)
setInterval(() => console.log('Memory:', used(), 'MB'), 1000)
build()
"

# 方法 2：使用 clinic.js
npm install -g clinic
clinic heapprofiler -- npx vite build

// 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();

# 运行
node --max-old-space-size=8192 scripts/build-with-heap-snapshot.ts

# 在 Chrome DevTools 中分析 .heapsnapshot 文件

# 启动带调试的构建
node --inspect --max-old-space-size=4096 node_modules/vite/bin/vite.js build

# 然后在 Chrome 中打开
chrome://inspect

// 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()),
    // ... 其他插件
  ],
});

# 方法 1：命令行参数
node --max-old-space-size=8192 node_modules/vite/bin/vite.js build

# 方法 2：环境变量
NODE_OPTIONS="--max-old-space-size=8192" npm run build

# 方法 3：package.json scripts
{
  "scripts": {
    "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 vite build"
  }
}

# 方法 4：.npmrc 文件
node-options=--max-old-space-size=8192

// 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,
      },
    },
  },
});

# Rspack - 基于 Rust，内存效率高
npm create rspack@latest

# Rsbuild - Rspack 的封装，配置更简单
npm create rsbuild@latest

# GitHub Actions 示例
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20"

      - name: Install dependencies
        run: npm ci

      - name: Build with increased memory
        run: npm run build
        env:
          NODE_OPTIONS: "--max-old-space-size=8192"

// 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!");
  }
});