DEV Community

Cover image for Umi 4 开发环境内存优化记录
息吹之岚
息吹之岚

Posted on

Umi 4 开发环境内存优化记录

#umi

内存吃紧的原因分析

开发服务器启动后 RSS 常驻 1.7GB+，主要由以下因素叠加导致：

1. MFSU eager 策略（主因，~500MB+）

Umi 4 的 MFSU（Module Federation Speed Up）默认使用 eager 策略，在启动时将 全部依赖预编译并加载到内存。项目依赖树庞大（node_modules 数十万文件），eager 模式下所有预编译产物常驻内存，是内存占用的最大头。

2. Source Map 默认配置（~200MB）

Umi 开发模式默认生成较高质量的 source map（如 cheap-module-source-map），每个模块的映射信息都驻留在内存中。项目 362 个源文件 + 数千个依赖模块，source map 数据量相当可观。

3. Node 默认堆内存限制

Node.js 默认堆内存上限取决于系统架构（64 位系统通常为 1.4GB–2GB），大型 Umi 项目在默认限制下频繁触发 GC，表现为内存"吃紧"和启动/编译变慢。未通过 NODE_OPTIONS 显式放开上限是加剧问题的因素。

4. TailwindCSS 独立进程（~40MB RSS）

Umi 的 tailwindcss 插件通过 crossSpawn 无条件启动一个独立的 Tailwind CLI 子进程，该进程常驻约 40MB RSS。插件源码中 watch 配置实际被 schema 忽略，无法通过配置关闭该进程。

5. 大体积依赖（磁盘占用即加载成本）

依赖 磁盘大小 说明
echarts ~61MB 图表库，全量安装
@ant-design/icons（3 个版本） ~66MB 因传递依赖版本冲突，同时安装了 @ant-design/icons、@ant-design/icons-svg 等多版本
paddleocr ~23MB OCR 模型文件
visactor 系列 数十 MB 可视化组件库

大体积依赖不仅占磁盘，MFSU 预编译时也会解析和缓存它们，间接推高内存。

6. 依赖冗余

pnpm dedupe --check 检测到 17 个可去重的冗余版本，包括 @ant-design/icons-svg@4.4.2 等多版本共存，增加了不必要的模块加载。

根因总结 

MFSU eager（~500MB）
  + Source Map（~200MB）
  + 大依赖预编译（~300MB）
  + TailwindCSS 子进程（~40MB）
  + Node 默认堆限制 → 频繁 GC 感知为"内存吃紧"
  ────────────────────────────
  ≈ 1.7GB RSS（优化前常态）
Enter fullscreen mode Exit fullscreen mode

结果 

优化前：1.7G
优化后：~900M  （降低 47%）
Enter fullscreen mode Exit fullscreen mode

改动清单

1. package.json — 放开 Node 堆内存上限 

- "dev": "max dev",
+ "dev": "cross-env NODE_OPTIONS='--max-old-space-size=4096' max dev",
- "start": "cross-env PROJECT_ENV=development UMI_ENV=development max dev",
+ "start": "cross-env NODE_OPTIONS='--max-old-space-size=4096' PROJECT_ENV=development UMI_ENV=development max dev",
Enter fullscreen mode Exit fullscreen mode

2. config/config.development.ts — 三项开发专属优化 

export default defineConfig({
  // 1. 最 cheap 的 source map（省 ~200MB）
  devtool: 'eval-cheap-module-source-map',

  // 2. MFSU 按需预编译，不全量加载（省 ~300MB）
  mfsu: {
    strategy: 'normal',
  },

  // 3. Webpack 懒编译：只编译浏览器实际请求的模块（省 ~300MB）
  chainWebpack(config: any) {
    config.merge({
      experiments: {
        lazyCompilation: {
          entries: false, // 入口不懒加载，保证首页速度
        },
      },
    });
  },

  proxy: { /* ... 保持不变 ... */ },
});
Enter fullscreen mode Exit fullscreen mode

对开发体验的影响

场景 影响
热更新 (HMR) ✅ 无影响
断点调试 ✅ 正常
报错定位 ✅ 行号准确
首页打开 ✅ 正常
冷启动 ⚠️ 慢 10-20 秒
当天首次打开子页面 ⚠️ 延迟 1-3 秒（仅第一次）
生产构建 ✅ 完全不影响

日常维护

  • 定期 rm -rf node_modules/.cache 清理 MFSU 缓存膨胀
  • pnpm dedupe 保持依赖不冗余

Top comments (0)