Vite 打包阶段钩子内存占用深度分析

src/main.ts         ← 模块
src/App.vue         ← 模块
src/utils/index.ts  ← 模块
node_modules/vue    ← 模块（第三方）

dist/assets/
├── index-Dg3k9xQp.js     ← chunk（入口 chunk）
├── vendor-BHp2mNkL.js    ← chunk（第三方库 chunk）
└── About-C7xQpLmN.js     ← chunk（懒加载路由 chunk）

源码模块（N 个）
    ↓  transform（逐个处理，一对一）
    ↓
已转换模块
    ↓  Rollup 分析 import 关系，决定合并/拆分策略
    ↓
Chunk（M 个，M << N）
    ↓  renderChunk（逐个处理，一对一）
    ↓
最终产物

// 路由懒加载，About 页面自动生成独立 chunk
const About = () => import('./pages/About.vue')

// vite.config.ts
build: {
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: ['vue', 'vue-router', 'pinia']  // → vendor-xxx.js
      }
    }
  }
}

build: {
  rollupOptions: {
    input: {
      main: 'index.html',
      admin: 'admin.html'
    }
  }
}

┌─────────────────────────────────────────────────────┐
│  Build 阶段（模块维度）                               │
│  options → buildStart → resolveId → load            │
│  → transform → moduleParsed → buildEnd              │
└─────────────────────────────────────────────────────┘
                        ↓
┌─────────────────────────────────────────────────────┐
│  Output 阶段（chunk 维度）                            │
│  renderStart → renderChunk → generateBundle         │
│  → writeBundle → closeBundle                        │
└─────────────────────────────────────────────────────┘

Node.js 进程基础 RSS          30~50 MB
Vite 本身加载（esm/cjs）      10~20 MB
rollup options 对象            < 1 MB

buildStart() {
  // ❌ 一次性读取所有依赖元信息进内存
  this.cache = fs.readdirSync('node_modules')
    .map(pkg => readPackageJson(pkg))  // 可能 10 万+ 文件条目
}

resolveId 每次调用产生：
├── 路径字符串缓存（模块 ID → 绝对路径映射表）
├── 插件 resolve 结果对象 { id, external, resolvedBy }
├── 文件系统 stat 缓存（避免重复 IO）
└── ModuleNode 对象（Vite ModuleGraph 中的节点）

500 个模块 × 5 个插件 = 2500 次 resolveId 调用

class ModuleNode {
  url: string                      // 原始 URL
  id: string | null                // 解析后绝对路径
  importers: Set<ModuleNode>       // 谁引用了我（双向引用）
  importedModules: Set<ModuleNode> // 我引用了谁（双向引用）
  transformResult: TransformResult // 转换结果缓存 ← 主要内存大户
}

t=0  load(moduleA) → 50KB 字符串，等待 transform
t=0  load(moduleB) → 30KB 字符串，等待 transform
t=0  load(moduleC) → 100KB 字符串，等待 transform
... 全部并发，字符串同时在堆里

transform 内存 =
  原始源码字符串（来自 load）
+ AST 对象（acorn 解析，1KB 源码 ≈ 8~15KB AST）
+ sourcemap 对象（每个模块维护完整 mappings 数组）
+ 插件处理中间结果（esbuild/babel/swc 内部表示）
+ 转换后的输出代码字符串
+ 各插件的 ctx 上下文对象

源码大小  →  AST 内存占用（粗略估算）
 10 KB   →   80~150 KB
 50 KB   →   400~800 KB
200 KB   →   1.6~3 MB

.vue 文件 transform 产生：
├── template AST（vue-template-compiler 解析）
├── script AST（ts → js）
├── style 处理（postcss AST）
├── 各块的 sourcemap
└── 最终合并的输出代码

一个 200 行的 .vue 文件可能产生 2~5 MB 临时对象

├── Scope 分析结果（每个变量的 binding 信息）
├── Tree Shaking 标记集合（哪些 export 被使用）
├── Chunk 分组信息（模块 → chunk 映射）
├── 循环依赖检测结果
└── 动态 import 分析图

renderChunk 内存 =
  当前 chunk 的完整代码字符串
+ 对应 sourcemap 对象（通常是代码体积的 1.5~3 倍）
+ 压缩插件的处理中间产物
+ 其余 chunk 同时在内存中（并发执行）

一个 500KB 的输出 chunk：
  code:             500 KB
  map.mappings:     ~800 KB ~ 1.5 MB（Base64 VLQ 编码）
  map.sourcesContent: 所有原始源码内容（!）← 等于源码双份拷贝

原始 chunk 字符串
  → 重新 parse AST（又一次！chunk 比单模块大 10~100 倍）
  → 压缩/混淆变换
  → 重新生成代码字符串
  → 重新生成 sourcemap

高峰期同时在内存：原始代码 + AST + 压缩后代码 + 两份 sourcemap

type OutputBundle = {
  [fileName: string]: OutputChunk | OutputAsset
}

interface OutputChunk {
  code: string       // 完整输出代码
  map: SourceMap     // sourcemap（含 sourcesContent）
  modules: { ... }   // 包含的所有模块信息
  imports: string[]
  dynamicImports: string[]
}

内存 (MB)
 ^
 |                         ★ buildEnd（次高峰）
1200|                      /‾‾‾‾\
    |                     /      \
1000|          ★ transform（最高峰）\
    |          /‾‾‾‾‾‾‾‾‾\        \
 800|         /            \        renderChunk
    |        /              \      /‾‾‾\
 600|  resolveId          moduleParsed   \
    |  /‾‾‾\                              \
 400| /      \                          generateBundle
    |/        load                              \
 200|                                        writeBundle
    |                                                 \
   0+-----------------------------------------------------> 时间
   options  buildStart                          closeBundle

transform(moduleA) → AST 创建 → 转换完 → AST 失去引用 → [GC 可能介入]
transform(moduleB) → AST 创建 → ...

没分包：
  500个模块 → 全部合并 → renderChunk 拿到 3MB 字符串
                          + 对应 sourcemap（6~9MB）
                          + terser 重新 parse 的 AST
                          = 单次峰值极高

分包后：
  500个模块 → 拆成 10 个 chunk → renderChunk 每次 300KB
                                  峰值只有原来的 1/10
                                  处理完一个可以部分释放

没分包的内存曲线：
           renderChunk
               ★ OOM
              /
____________/

分包后的内存曲线：
     chunk1  chunk2  chunk3  chunk4
       ↑       ↑       ↑       ↑
___/‾\_/‾\_/‾\_/‾\___   平稳波动，不超阈值

// ❌ 存在测量盲区的版本
export default function createMemoryMonitorPlugin() {
  let timer = null;
  return {
    buildStart() {
      // 问题1：500ms 轮询，短于 chunk 处理时间则漏掉峰值
      timer = setInterval(() => { /* ... */ }, 500);

      // 问题2：OOM 时 exit 事件不触发（abort 信号，非正常退出）
      process.once("exit", () => { /* 这行 OOM 时写不进去 */ });
    },
    renderChunk(_code, chunk) {
      phase = `renderChunk:${chunk.fileName}`;
      // 问题3：只更新 phase，没有记录内存，OOM 时日志空白
    },
  };
}

import { resolve } from "path";
import fs from "fs";

export default function createMemoryMonitorPlugin() {
  const logFile = resolve(process.cwd(), "build-memory.log");
  let phase = "init";
  let peak = 0;
  let peakPhase = "init";
  let timer = null;

  const write = (msg) => fs.appendFileSync(logFile, msg + "\n");
  const mb = () => process.memoryUsage().heapUsed / 1024 / 1024;
  const rss = () => process.memoryUsage().rss / 1024 / 1024;

  const snapshot = (label) => {
    const cur = mb();
    const r = rss();
    write(`[${label}] heap: ${cur.toFixed(1)} MB | rss: ${r.toFixed(1)} MB`);
    if (cur > peak) {
      peak = cur;
      peakPhase = label;
    }
    return cur;
  };

  // 兜底：OOM 前尽量记录（捕获 uncaughtException）
  process.on("uncaughtException", (err) => {
    write(`\n[!!! 崩溃] 阶段: ${phase} | heap: ${mb().toFixed(1)} MB`);
    write(`[!!! 错误] ${err.message}`);
  });

  return {
    name: "memory-monitor",

    buildStart() {
      phase = "buildStart";
      peak = 0;
      fs.writeFileSync(logFile, `=== 构建开始 ${new Date().toLocaleString()} ===\n`);

      // 改为 100ms，更容易捕捉短暂峰值
      timer = setInterval(() => {
        const cur = mb();
        if (cur > peak) {
          peak = cur;
          peakPhase = phase;
          write(`[峰值更新] ${phase} | heap: ${cur.toFixed(1)} MB | rss: ${rss().toFixed(1)} MB`);
        }
      }, 100);

      snapshot("buildStart");
    },

    buildEnd() {
      phase = "buildEnd";
      snapshot("buildEnd");
    },

    renderStart() {
      phase = "renderStart";
      snapshot("renderStart");
    },

    renderChunk(code, chunk) {
      // 关键改进：每个 chunk 记录大小 + 处理前内存
      phase = `renderChunk:${chunk.fileName}`;
      const sizeKB = (code.length / 1024).toFixed(1);
      snapshot(`renderChunk:${chunk.fileName}(${sizeKB}KB)`);
    },

    generateBundle() {
      phase = "generateBundle";
      snapshot("generateBundle");
    },

    writeBundle() {
      phase = "writeBundle";
      snapshot("writeBundle");
    },

    closeBundle() {
      clearInterval(timer);
      snapshot("closeBundle");
      write(`\n[最终峰值] ${peak.toFixed(1)} MB | 阶段: ${peakPhase}`);
      console.log(`\n[内存峰值] ${peak.toFixed(1)} MB | 阶段: ${peakPhase}`);
    },
  };
}

=== 构建开始 2025/4/5 10:23:11 ===
[buildStart]    heap: 85.2 MB  | rss: 120.1 MB
[buildEnd]      heap: 980.4 MB | rss: 1240.3 MB
[renderStart]   heap: 982.1 MB | rss: 1241.0 MB
[renderChunk:vendor-BHp2mNkL.js(2048.3KB)]   heap: 1124.7 MB | rss: 1420.5 MB
[峰值更新] renderChunk:vendor-BHp2mNkL.js | heap: 1380.2 MB | rss: 1650.1 MB
[renderChunk:index-Dg3k9xQp.js(312.1KB)]     heap: 890.3 MB  | rss: 1180.2 MB
[generateBundle] heap: 920.1 MB | rss: 1200.4 MB
[closeBundle]    heap: 312.1 MB | rss: 480.3 MB

[最终峰值] 1380.2 MB | 阶段: renderChunk:vendor-BHp2mNkL.js(2048.3KB)

// vite.config.ts
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            // 按包名分包，而非打成一个 vendor
            return id.match(/node_modules\/([^/]+)/)?.[1]
          }
        }
      }
    }
  }
}

export default {
  build: {
    sourcemap: false,  // 生产环境通常不需要，内存减少 30~50%
  }
}

export default {
  build: {
    minify: 'esbuild',  // Vite 默认值，不要手动改成 'terser'
  }
}

import { terser } from 'rollup-plugin-terser'
export default {
  plugins: [
    terser({
      maxWorkers: 2  // 防止多 chunk 同时压缩叠加
    })
  ]
}

// package.json
{
  "scripts": {
    "build": "node --max-old-space-size=4096 node_modules/.bin/vite build"
  }
}

export function myPlugin() {
  let cache = new Map()

  return {
    name: 'my-plugin',
    buildStart() {
      cache.clear()  // 每次构建重置，避免多次 build 累积
    },
    transform(code, id) {
      const result = heavyTransform(code)
      cache.set(id, result.summary)  // 只缓存摘要，不缓存完整 AST
      return result.code
    },
    renderChunk(code) {
      // ❌ 不要对大字符串做全量正则或重新 parse AST
      // ✅ 只做轻量的字符串替换
      return code.replace(/process\.env\.NODE_ENV/g, '"production"')
    },
    closeBundle() {
      cache.clear()
      cache = null  // 断开引用，让 GC 彻底回收
    }
  }
}

V8 堆：
┌──────────────────────────────────────┐
│  New Space（新生代）1~8 MB            │
│  Scavenger GC，高频，速度快            │
│  存放：短命临时对象（AST 节点等）       │
├──────────────────────────────────────┤
│  Old Space（老生代）受 max-old-space  │
│  Mark-Sweep-Compact，低频，速度慢     │
│  存放：ModuleGraph、chunk code 字符串 │
└──────────────────────────────────────┘

const { heapUsed, rss, external, arrayBuffers } = process.memoryUsage()
// heapUsed：V8 堆中已使用的内存
// rss：进程占用的物理内存总量（包含 heapUsed + native + stack）
// external：C++ 对象（Buffer 等）占用的内存
// arrayBuffers：ArrayBuffer 分配的内存

# 在堆快照触发点附近生成快照
node --max-old-space-size=8192 \
     --heapsnapshot-near-heap-limit=3 \
     node_modules/.bin/vite build