Angular5项目内存过高及Webpack构建堆内存溢出问题求助

针对你遇到的情况——已经通过webpack.optimize.ModuleConcatenationPlugin()把运行时内存从95MB降到76MB，但生成stats文件时触发JavaScript堆内存不足错误，我给你几个实用的解决方案：

1. 给Node.js分配更多内存 #

Webpack生成stats.json时需要处理大量模块的详细信息，很容易耗尽默认的Node.js内存配额。你可以直接在构建脚本里增加内存限制：

修改package.json中的build:stats脚本：

"build:stats": "node --max-old-space-size=4096 webpack --profile --json --config webpack.config.buildserve..."

这里的4096代表分配4GB内存，你可以根据自己机器的内存情况调整（比如8GB内存的话可以设为6144）。

2. 精简Stats生成的数据量 #

默认的--json参数会生成极其详细的构建数据，很多内容可能并不是你需要的。你可以通过指定--stats参数或者在Webpack配置中设置stats选项，只保留关键信息：

方式一：在命令行指定 #

webpack --profile --stats "errors-only,assets,chunks,modules" --json --config webpack.config.buildserve...

方式二：在Webpack配置中添加 #

module.exports = {
  // 其他配置项...
  stats: {
    chunks: true,
    modules: true,
    assets: true,
    excludeAssets: /\.map$/, // 排除体积庞大的sourcemap文件
    excludeModules: /node_modules\/(rxjs-compat|moment)/, // 可选：排除不需要分析的第三方大库
  }
}

这样生成的stats.json体积会大幅减小，构建时的内存压力也会降低。

3. 检查ModuleConcatenationPlugin的使用场景 #

这个插件虽然能降低运行时内存，但在构建阶段会增加内存开销（因为要做模块拼接的分析工作）。建议只在生产环境启用它：

const webpack = require('webpack');
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  plugins: [
    // 其他插件...
    ...(isProduction ? [new webpack.optimize.ModuleConcatenationPlugin()] : [])
  ]
}

另外，如果你是基于Angular CLI定制的Webpack配置，要注意CLI本身已经内置了类似的构建优化（对应--build-optimizer参数），避免重复配置导致额外的内存消耗。

4. 进一步巩固项目体积优化 #

既然你已经在关注运行时内存，顺便给你几个额外的优化点，帮你把项目体积压得更合理：

• 启用Tree Shaking：在package.json中添加"sideEffects": false（针对无副作用的库），或者明确标注有副作用的文件路径。
• 路由懒加载：把非首屏的功能模块改成懒加载模式，减少初始加载的代码量。
• 优化第三方依赖：用轻量化的库替代大体积依赖（比如用date-fns代替moment.js），或者按需引入库的部分功能（比如用lodash-es配合Tree Shaking）。
• 压缩资源：确保生产环境启用代码压缩插件（Angular 5默认用UglifyJsPlugin），同时压缩CSS文件。

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