EnlightenCode

解决 Webpack 构建卡在 92.44% 的内存问题 ​

在开发大型前端项目时，经常会遇到 webpack 构建过程中卡在 92.44% sealing asset processing ESLintWebpackPlugin_1 的情况。本文将详细介绍如何通过分析和调整 Node.js 内存来解决这个问题。

1. 问题分析 ​

现象 ​

项目在运行 yarn start 或 npm start 时，构建进度会停滞在：

bash
92.44% sealing asset processing
92.44% sealing asset processing ESLintWebpackPlugin_1

原因分析 ​

  • 内存不足：Node.js 默认的内存限制可能无法满足大型项目的构建需求
  • 项目规模：随着项目规模增大，webpack 需要处理的文件和依赖越来越多
  • ESLint 检查：ESLint 插件在处理大量文件时会占用大量内存

2. 内存分析 ​

查看当前内存使用 ​

使用以下命令查看 Node.js 进程的内存使用情况：

javascript
node -e "console.log(process.memoryUsage())"

输出结果解析：

javascript
{
  rss: 32075776,        // 实际物理内存使用量 (≈30.59 MB)
  heapTotal: 5025792,   // 堆内存总量 (≈4.79 MB)
  heapUsed: 4287440,    // 已用堆内存 (≈4.09 MB)
  external: 345592,     // 外部内存使用量 (≈0.33 MB)
  arrayBuffers: 11218   // 缓冲区内存 (≈0.01 MB)
}

内存指标说明 ​

  • rss (Resident Set Size)：进程实际占用的物理内存大小
  • heapTotal：V8 引擎分配的堆内存总量
  • heapUsed：实际使用的堆内存量
  • external：V8 引擎外的内存使用量
  • arrayBuffers：Buffer 对象分配的内存量

3. 解决方案 ​

方案一：临时调整内存限制 ​

在命令行中设置 NODE_OPTIONS：

bash
# Windows CMD
set NODE_OPTIONS=--max_old_space_size=4096 && yarn start

# Windows PowerShell
$env:NODE_OPTIONS="--max_old_space_size=4096"; yarn start

方案二：永久配置（推荐） ​

在 package.json 中修改启动脚本：

json
{
  "scripts": {
    "start": "cross-env NODE_OPTIONS=\"--max-old-space-size=4096\" react-app-rewired start",
    "build": "cross-env NODE_OPTIONS=\"--max-old-space-size=4096\" react-app-rewired build"
  }
}

方案三：创建启动脚本 ​

创建 start.bat 文件（Windows）：

batch
@echo off
set NODE_OPTIONS=--max_old_space_size=4096
yarn start

4. 最佳实践 ​

内存设置建议 ​

根据项目规模选择合适的内存设置：

bash
# 中型项目 (4GB)
--max_old_space_size=4096

# 大型项目 (8GB)
--max_old_space_size=8192

# 超大型项目 (16GB)
--max_old_space_size=16384

性能优化配置 ​

在 config-overrides.js 中添加性能优化：

javascript
module.exports = {
    webpack: function override(config) {
        const isProduction = process.env.NODE_ENV === 'production';

        if (!isProduction) {
            // 开发环境优化
            config.cache = {
                type: 'filesystem',
                allowCollectingMemory: true,
                buildDependencies: {
                    config: [__filename],
                },
            };

            // 优化模块解析
            config.resolve = {
                ...config.resolve,
                symlinks: false,
                cacheWithContext: false,
            };
        }

        return config;
    }
};

清理脚本 ​

添加清理缓存的脚本：

json
{
  "scripts": {
    "clean": "rimraf node_modules/.cache && rimraf .eslintcache",
    "start:fresh": "yarn clean && yarn start"
  }
}

5. 监控与维护 ​

内存监控 ​

添加内存监控代码：

javascript
setInterval(() => {
    const used = process.memoryUsage();
    console.table({
        'Heap Used (MB)': Math.round(used.heapUsed / 1024 / 1024),
        'Heap Total (MB)': Math.round(used.heapTotal / 1024 / 1024),
        'RSS (MB)': Math.round(used.rss / 1024 / 1024),
    });
}, 10000);

定期维护 ​

  • 定期清理项目缓存
  • 更新依赖包版本
  • 检查并移除未使用的依赖
  • 优化项目代码结构

总结 ​

解决 webpack 构建卡住的问题，关键在于：

  1. 正确分析当前内存使用情况
  2. 根据项目规模设置合适的内存限制
  3. 采用合适的性能优化配置
  4. 建立有效的监控和维护机制

通过以上措施，可以显著提高项目的构建性能，改善开发体验。同时，建议在团队中建立统一的配置标准，确保所有开发人员都能够顺利运行项目。