Ant Design Pro项目执行npm run start时构建卡在91%求助

问题背景 #

我基于Ant Design Pro搭建的项目，近期执行npm run start时突然出现异常：构建进度卡在91%后报错，且未明确提示错误位置。已将npm升级至6版本，但问题仍未解决。具体报错信息如下：

build [================== ] 91%(node:6978) UnhandledPromiseRejectionWarning: RangeError: Invalid string length at formatError (/home/teks/trips/may26th/smarttrips_react/node_modules/webpack/lib/Stats.js:223:30) at Array.map (<anonymous>) at Stats.toJson (/home/teks/trips/may26th/smarttrips_react/node_modules/webpack/lib/Stats.js:230:31) at Compiler.<anonymous> (/home/teks/trips/may26th/smarttrips_react/node_modules/html-webpack-plugin/index.js:68:44) at Compiler.applyPluginsAsyncSeries (/home/teks/trips/may26th/smarttrips_react/node_modules/tapable/lib/Tapable.js:206:13) at Compiler.emitAssets (/home/teks/trips/may26th/smarttrips_react/node_modules/webpack/lib/Compiler.js:354:8) at onCompiled (/home/teks/trips/may26th/smarttrips_react/node_modules/webpack/lib/Compiler.js:58:19) at applyPluginsAsync.err (/home/teks/trips/may26th/smarttrips_react/node_modules/webpack/lib/Compiler.js:510:14) at next (/home/teks/trips/may26th/smarttrips_react/node_modules/tapable/lib/Tapable.js:202:11) at Compiler.<anonymous> (/home/teks/trips/may26th/smarttrips_react/node_modules/webpack/lib/CachePlugin.js:78:5) at next (/home/teks/trips/may26th/smarttrips_react/node_modules/tapable/lib/Tapable.js:204:14) at /home/teks/trips/may26th/smarttrips_react/node_modules/hard-source-webpack-plugin/index.js:2075:7 at <anonymous> (node:6978) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1) (node:6978) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

分析与解决方案 #

这个错误是webpack在格式化构建统计信息时触发的RangeError: Invalid string length，通常和缓存损坏、日志过大、Node内存不足或依赖兼容性有关，结合Ant Design Pro的特性，按以下步骤排查：

1. 清理构建缓存

Ant Design Pro默认使用hard-source-webpack-plugin做缓存，缓存文件损坏是这类突发问题的常见原因：

• 执行命令清理缓存：

  rm -rf node_modules/.cache
  npm run clean
  

• 重新安装依赖并启动：

  npm install
  npm run start
  

2. 限制webpack日志输出

如果构建过程中生成的日志过长，会超出Node字符串长度限制，导致报错：

• 方案一：修改项目config/config.js，降低日志级别：

  // config/config.js
  export default {
    // ...其他配置项
    chainWebpack: (config) => {
      // 只输出错误日志，减少日志体积
      config.plugin('stats').use(require('webpack/lib/StatsPlugin'), [
        { preset: 'errors-only' }
      ]);
    }
  };
  

• 方案二：启动时添加静默参数：

  npm run start -- --quiet
  

3. 增加Node.js内存配额

大项目构建时Node内存不足也会触发字符串长度错误，调整启动命令的内存限制：

• 修改package.json中的start脚本：

  {
    "scripts": {
      "start": "node --max-old-space-size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js"
    }
  }
  

  这里4096代表分配4G内存，可根据你的机器配置调整为2048（2G）或8192（8G）。

4. 排查近期代码变更

既然是突然出现的问题，大概率和你最近的代码修改有关：

• 检查是否引入了超大的JSON文件、静态资源（比如几MB的本地JSON）；
• 检查组件中是否有输出超长内容的console.log；
• 检查是否修改过webpack或Ant Design Pro的配置文件；
• 可以用git revert回退到之前能正常构建的版本，逐步定位问题代码。

5. 调整依赖版本

报错信息指向html-webpack-plugin和webpack，可能存在版本兼容性问题：

• 降级html-webpack-plugin到4.x稳定版本：

  npm install html-webpack-plugin@4 --save-dev
  

• 或者升级webpack到最新稳定版：

  npm install webpack@latest --save-dev
  

内容的提问来源于stack exchange，提问作者faraz