.NET Core应用中Node与Webpack内存扩容失败求助

我在.NET Core应用里折腾Node和Webpack的内存上限好久了，查资料知道要用--max-old-space-size参数，但试了各种配置还是报FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory错误。

现有配置 #

package.json #

{
  "scripts": {
    "high-memory": "node -r ts-node/register",
    "lint": "tslint --exclude=node_modules/** **/*.ts",
    "generate:client": "npm run high-memory -- ./swagger/generate-client.ts --baseApiUrl=http://localhost:5003",
    "generate:client:prod": "npm run high-memory -- ./swagger/generate-client.ts --baseApiUrl=http://localhost:5003",
    "start": "npm run clean:dist && npm run generate:client && webpack",
    "clean:dist": "rimraf ./wwwroot/*",
    "build": "npm run clean:dist && npm run generate:client:prod && webpack -p"
  },
  "dependencies": {
    "@types/googlemaps": "^3.26.1",
    "@types/handlebars": "^4.0.31",
    "@types/node": "^7.0.5",
    "@types/react": "^15.0.34",
    "@types/react-dom": "^15.5.1",
    "@types/react-router": "^3.0.3",
    "@types/superagent": "^2.0.36",
    "@types/yargs": "^6.6.0",
    "assets-webpack-plugin": "^3.5.1",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "2.1.2",
    "file-loader": "^0.10.0",
    "google-map-react": "^0.22.3",
    "handlebars": "^4.0.6",
    "mobx": "^3.1.0",
    "mobx-react": "^4.1.0",
    "moment": "^2.17.1",
    "node-sass": "^4.5.0",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-resize-observer": "^0.1.0",
    "react-router": "^3.0.2",
    "rimraf": "^2.6.1",
    "sass-loader": "^6.0.1",
    "style-loader": "^0.13.1",
    "superagent": "^3.4.4",
    "ts-loader": "^2.2.2",
    "ts-node": "^3.1.0",
    "tslint": "^4.4.2",
    "tslint-loader": "^3.5.3",
    "tslint-react": "^3.0.0",
    "typescript": "^2.4.1",
    "url-loader": "^0.5.7",
    "webpack": "^3.1.0",
    "webpack-md5-hash": "^0.0.5",
    "yargs": "^6.6.0"
  }
}

Webpack配置 #

const webpack = require('webpack');
const path = require('path');
const srcPath = path.resolve('./src');
const distPath = path.resolve('./wwwroot');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const AssetsPlugin = require('assets-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');

const config = {
  entry: {
    'index': `${srcPath}/index.tsx`
  },
  output: {
    path: distPath,
    filename: '[name].js',
    sourceMapFilename: '[file].map.json'
  },
  module: {
    rules: [
      {
        test: /\.tsx$/,
        enforce: 'pre',
        loader: 'tslint-loader',
      },
      {
        test: /\.tsx?$/,
        loader: 'ts-loader'
      },
      {
        test: /\.scss|sass$/,
        loader: ExtractTextPlugin.extract({
          loader: ['css-loader', 'sass-loader']
        })
      },
      {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url-loader?limit=10000&mimetype=application/font-woff"
      },
      {
        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url-loader?limit=10000&mimetype=application/font-woff"
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url-loader?limit=10000&mimetype=application/octet-stream"
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: "file-loader"
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url-loader?limit=10000&mimetype=image/svg+xml"
      },
      {
        test: /\.png(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'file-loader'
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js', '.tsx', '.css', '.scss', '.sass'],
    modules: [path.resolve(srcPath),'node_modules']
  },
  plugins: [
    new ExtractTextPlugin({filename: '[name].css'}),
    new webpack.ContextReplacementPlugin(/moment[\\\/]locale$/, /^\.\/(en)$/),
    new webpack.optimize.ModuleConcatenationPlugin()
  ],
  devtool: 'eval'
};

module.exports = config;

已尝试的无效操作 #

• 修改high-memory脚本为两种形式：

  "high-memory": "node --max-old-space-size=18192 -r ts-node/register"
  

  "high-memory": "node -r ts-node/register" --max-old-space-size=18192"
  

• 执行命令：

  npm --max-old-space-size=18192 start
  

• 临时将devtool设为(none)可构建，但调试难度大幅增加，无法作为长期方案。

1. 给Webpack进程单独追加内存参数
   你当前的start和build脚本直接调用webpack，但该调用未给Node进程传递内存参数。需替换为直接调用Webpack的Node入口文件并附加参数：
   修改package.json的scripts：

   "start": "npm run clean:dist && npm run generate:client && node --max-old-space-size=18192 node_modules/webpack/bin/webpack.js",
   "build": "npm run clean:dist && npm run generate:client:prod && node --max-old-space-size=18192 node_modules/webpack/bin/webpack.js -p"
   

2. 修复high-memory脚本的语法错误
   第二种写法存在语法问题，正确的参数顺序是将--max-old-space-size放在node命令后：

   "high-memory": "node --max-old-space-size=18192 -r ts-node/register"
   

   注：之前该配置未生效是因为内存溢出由Webpack进程导致，而非ts-node执行的代码。

3. 优化Webpack配置降低内存消耗
   替换devtool为更轻量的选项，既保留调试能力又减少内存占用：

   devtool: 'eval-cheap-module-source-map'
   

   同时可临时禁用非必要的tslint-loader，进一步降低编译时的内存开销。

4. 通过环境变量全局设置内存参数
   若不想逐个脚本修改，可设置全局环境变量让所有Node进程继承：

   # Windows系统
   set NODE_OPTIONS=--max-old-space-size=18192
   # Linux/macOS系统
   export NODE_OPTIONS=--max-old-space-size=18192
   

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