Hey there, sorry to hear you're stuck with this heap out of memory error when running your production build. Let's break down what's happening and walk through solutions tailored to your setup (Ubuntu 16.04, 8GB RAM, Intel Core-i5, React 16.2 + Redux, babel-minify-webpack-plugin).

Why This Happens #

Node.js sets a default memory limit for the V8 engine (around 1.4GB for 64-bit systems). When Webpack processes your React/Redux codebase—especially with minification—it can easily exceed this limit, triggering the heap out of memory error.

Quick Fix: Boost Node.js Memory Allocation #

The fastest way to get your build working is to increase the memory allocated to Node.js when running the build command. Here's how:

1. Open your package.json and locate the build:prod script.
2. Update it to include the --max-old-space-size flag (we'll set it to 4GB since you have 8GB of total RAM—this gives Webpack enough headroom without hogging all system resources):

"scripts": {
  "build:prod": "node --max-old-space-size=4096 node_modules/webpack/bin/webpack.js --mode production --config webpack.config.js"
}

Alternatively, you can set the memory limit via an environment variable before running the command:

NODE_OPTIONS="--max-old-space-size=4096" npm run build:prod

Long-Term Optimizations to Reduce Memory Load #

Increasing the memory limit works, but optimizing your Webpack config will prevent the issue from recurring and speed up builds. Here are targeted tweaks for your stack:

• Exclude Unnecessary Files
  Make sure Webpack only processes your application code, not unrelated files. Add exclude rules for node_modules (unless you need to transpile specific packages) in your module rules:

module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: 'babel-loader'
    }
  ]
}

• Optimize babel-minify-webpack-plugin
  Adjust the plugin to use less memory by enabling parallel processing (leveraging your multi-core i5) and disabling aggressive, resource-heavy minification steps if they aren't critical:

const MinifyPlugin = require("babel-minify-webpack-plugin");

module.exports = {
  // ... other config
  plugins: [
    new MinifyPlugin(
      {
        removeConsole: true,
        removeDebugger: true
      },
      {
        parallel: true // Splits work across CPU cores
      }
    )
  ]
};

• Split Your Bundle
  Large single bundles force Webpack to process massive amounts of code at once. Split your bundle into vendor (React/Redux) and app chunks to reduce memory load:

module.exports = {
  // ... other config
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  }
};

• Remove Dev-Only Plugins from Production
  Ensure you're only loading production-necessary plugins. Wrap dev-specific plugins (like HotModuleReplacementPlugin) in an environment check:

const plugins = [];

const env = process.env.NODE_ENV || 'development';

if (env === 'production') {
  plugins.push(new MinifyPlugin(...));
  // Add other production-only plugins here
} else {
  plugins.push(new webpack.HotModuleReplacementPlugin());
}

module.exports = {
  // ... other config
  plugins: plugins
};

Verify the Fix #

After making these changes, run your build command again:

npm run build:prod

You should no longer see the heap out of memory error. If you still do, try increasing the memory limit to 6144 (6GB), but the optimizations above should already reduce the memory footprint significantly.

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