升级Node后React项目运行时ForkTsCheckerWebpackPlugin内存溢出如何解决

解决方案 #

第一步：定位ForkTsCheckerWebpackPlugin配置 #

在项目的webpack配置文件（通常是webpack.config.js、webpack.dev.js这类开发环境配置文件）中搜索ForkTsCheckerWebpackPlugin关键词，找到该插件的实例化代码。
基础的配置结构参考如下：

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = {
  // 其他webpack全局配置
  plugins: [
    // 此处为该插件的配置项
    new ForkTsCheckerWebpackPlugin({
      // 原有其他配置项
    }),
    // 其他webpack插件配置
  ]
}

第二步：调整内存限制参数 #

在插件的配置对象中添加memoryLimit参数，单位为MB，默认值为2048，建议根据你的设备内存调整到4096或更高：

new ForkTsCheckerWebpackPlugin({
  // 保留原有所有配置项
  memoryLimit: 4096, // 可根据实际情况调整为8192
})

修改后保存配置，重启开发服务即可生效。

特殊情况：未eject的Create React App项目 #

如果你的项目是基于Create React App创建且未执行过eject操作，无需修改webpack配置，直接调整package.json中的启动脚本即可：

• macOS/Linux环境：

{
  "scripts": {
    "start": "NODE_OPTIONS=--max-old-space-size=4096 react-scripts start",
    // 保留其他原有脚本
  }
}

• Windows环境：
  先安装跨环境变量工具：npm i cross-env -D，再修改脚本：

{
  "scripts": {
    "start": "cross-env NODE_OPTIONS=--max-old-space-size=4096 react-scripts start",
    // 保留其他原有脚本
  }
}

可选优化方案 #

如果调高内存后仍然偶现报错，可以额外添加以下配置降低内存占用：

• 开启增量类型检查，仅检查修改过的文件：

new ForkTsCheckerWebpackPlugin({
  memoryLimit: 4096,
  typescript: {
    build: true
  }
})

• 开发环境临时禁用lint检查，仅保留类型校验：

new ForkTsCheckerWebpackPlugin({
  memoryLimit: 4096,
  eslint: {
    enabled: false
  }
})

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