angular4 使用 ng build --prod 编译报内存溢出

 如下:

<--- Last few GCs --->

[13724:0000020D39C660D0] 231298 ms: Mark-sweep 1356.3 (1433.6) -> 1356.3 (1433.6) MB, 1194.3 / 0.0 ms allocation failure GC in old space requested [13724:0000020D39C660D0] 232615 ms: Mark-sweep 1356.3 (1433.6) -> 1356.3 (1426.6) MB, 1198.3 / 0.0 ms last resort GC in old space requested [13724:0000020D39C660D0] 233976 ms: Mark-sweep 1356.3 (1426.6) -> 1356.3 (1426.6) MB, 1361.9 / 0.0 ms last resort GC in old space requested
==== JS stack trace =========================================

Security context: 000003D3AF3A5879 <JSObject>
    1: forEachTrailingCommentToEmit(aka forEachTrailingCommentToEmit) 
[D:\workspace\test5\node_modules\@angular-devkit\build-      optimizer\node_modules\typescript\lib\typescript.js:~68706] 
### 解决 Angular 项目启动时内存溢出问题 当遇到 Angular 项目启动时发生内存溢出的情况,可以采取多种措施来优化构建过程并减少资源消耗。以下是几种有效的解决方案: #### 增加 Node.js 的最大堆栈大小 默认情况下,Node.js 运行时的最大堆栈大小可能不足以处理大型项目的编译需求。可以通过设置环境变量 `NODE_OPTIONS` 来增加此限制。 ```bash export NODE_OPTIONS="--max-old-space-size=8192" ``` 这会将可用内存量提升到 8GB[^1]。 #### 使用 Angular 构建优化器 (Build Optimizer) 启用构建优化功能可以在生产模式下移除未使用的代码和其他不必要的部分,从而减小最终包的尺寸以及降低打包期间所需的 RAM 数量。 ```json { "projects": { "your-project-name": { ... "architect": { "build": { ... "configurations": { "production": { "optimization": true, "buildOptimizer": true } } } } } } } ``` 上述配置确保了在执行 ng build --prod 或者其他等效命令时自动应用这些选项。 #### 利用 Webpack Bundle Analyzer 插件分析依赖关系树 通过安装 webpack-bundle-analyzer 工具可以帮助识别哪些模块占用了过多空间,并据此调整应用程序结构或第三方库的选择。 ```shell npm install --save-dev @angular-builders/custom-webpack webpack-bundle-analyzer ``` 接着修改 angular.json 文件以集成该插件: ```json "builder": "@angular-builders/custom-webpack:browser", "options": { "customWebpackConfig": { "path": "./extra-webpack.config.js" }, ... ``` 并在 extra-webpack.config.js 中加入如下内容: ```javascript const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer'); module.exports = { plugins:[ new BundleAnalyzerPlugin() ] }; ``` 运行带有 --stats 参数的构建指令将会生成一份详细的告文件用于后续审查。 #### 更新至最新版本的 Angular CLI 和相关工具链 保持开发环境中所使用的技术栈处于最新状态有助于获得性能改进和 bugfixes ,进而缓解潜在的问题源。 ```shell ng update @angular/cli @angular/core ``` 以上方法综合运用能够有效应对大多数场景下的 OOM 错误,如果仍然存在困难,则建议进一步调查具体原因所在之处,比如是否存在循环引用等问题导致异常膨胀的对象图谱。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值