关于资产优化的 Angular-cli 'JavaScript heap out of memory'

Posted

技术标签:

【中文标题】关于资产优化的 Angular-cli \'JavaScript heap out of memory\'【英文标题】:Angular-cli 'JavaScript heap out of memory' on asset optimization关于资产优化的 Angular-cli 'JavaScript heap out of memory' 【发布时间】:2017-05-21 22:14:32 【问题描述】:

我正在 Angular-cli 项目中创建传单地图。地图切片本地存储在“资产”文件夹中,因为它是栅格地图。问题是当我有很多缩放级别的地图时,我有超过 280,000 张图像,大小约为 1.1 GB,而且它会变得更大。

当我使用ng serve 时,这里是控制台输出(卡在@assets optimization):

** NG Live Development Server is running on http://localhost:4200. **
25234ms building modules
69ms sealing
0ms optimizing
0ms basic module optimization
96ms module optimization
1ms advanced module optimization
16ms basic chunk optimization
0ms chunk optimization
1ms advanced chunk optimization
0ms module and chunk tree optimization
179ms module reviving
9ms module order optimization
4ms module id optimization
6ms chunk reviving
23ms chunk order optimization
36ms chunk id optimization
61ms hashing
1ms module assets processing
149ms chunk assets processing
4ms additional chunk assets processing
0ms recording
1ms additional asset processing
2693ms chunk asset optimization
 94% asset optimization
<--- Last few GCs --->

  119106 ms: Mark-sweep 1333.6 (1409.7) -> 1333.6 (1415.7) MB, 1402.0 / 2.1 ms [allocation failure] [GC in old space requested].
  120570 ms: Mark-sweep 1333.6 (1415.7) -> 1333.6 (1427.7) MB, 1464.2 / 2.2 ms [allocation failure] [GC in old space requested].
  122079 ms: Mark-sweep 1333.6 (1427.7) -> 1340.0 (1409.7) MB, 1508.1 / 2.5 ms [last resort gc].
  123749 ms: Mark-sweep 1340.0 (1409.7) -> 1346.3 (1409.7) MB, 1670.2 / 2.1 ms [last resort gc].


<--- JS stacktrace --->

==== JS stack trace =========================================

Security context: 000001AA792CFB61 <JS Object>
    1: inflight [C:\Workspace\node_modules\inflight\inflight.js:~7] [pc=00000202BF9894B7] (this=000001AA792E6661 <JS Global Object>,key=00000045863E5881 <Strin
g[90]\: lstat\x00C:/Workspace/src/assets/leafletmap_files/9/42/176.png>,cb=00000045863E5839 <JS Function lstatcb_ (SharedFunctionInfo 00000253E9EFC219
)>)
    2: wrapper [C:\Workspace\...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - javascript heap out of memory

我尝试使用: node --max_old_space_size=8192 --optimize_for_size --max_executable_size=4096 --stack_size=4096,但没有任何区别。

1- 有没有其他方法可以避免优化所有资产文件夹?如果这是我认为的问题根源,因为在添加更多传单平铺图像之前项目运行顺利.

2- 有什么办法可以解决这个问题吗?

更新: Angular-cli repository 有一个与此问题相关的未解决问题。

【问题讨论】:

【参考方案1】:

就我而言,我不得不将节点版本降级到 v12.14.1,它现在可以正常工作了!!

【讨论】:

正如目前所写,您的答案尚不清楚。请edit 添加其他详细信息,以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。【参考方案2】:

对于 Angular s-s-r(服务器端渲染)

如果您尝试运行 ng run dev:s-s-r 并遇到内存错误,您可以这样做:

node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng run ANGULAR:serve-s-s-r -c development

将 ANGULAR 更改为您在 angular.json 中调用的项目。

-c 是您要运行的可选配置。

【讨论】:

【参考方案3】:

在终端中运行以下命令:

node --max_old_space_size=10048 ./node_modules/@angular/cli/bin/ng serve

【讨论】:

【参考方案4】:

运行“ng serve --open”时遇到错误

来源Link

解决方案

package.json “scripts” 属性中将其更新为以下

**"start": "node --max_old_space_size=2192 ./node_modules/@angular/cli/bin/ng serve",**

【讨论】:

【参考方案5】:

将以下行添加到package.json 文件中。

"aot": "node --max-old-space-size=8192 ./node_modules/@angular/cli/bin/ng build --prod --aot"

并尝试使用npm run aot 运行

它对我有用。

【讨论】:

虽然可行,但需要 8GB 内存是不是很疯狂?【参考方案6】:
node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng serve

打开终端并在终端中添加上面的文本,然后单击 enter 。 就是这样。

【讨论】:

【参考方案7】:

将此行添加到package.json 文件中。

"build": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng build --prod"

【讨论】:

【参考方案8】:

您可以将NODE_OPTIONS 添加为系统变量。要将内存设置为 4 个演出,

--max-old-space-size=4096

更多关于this thread 的信息,他们值得投票

【讨论】:

【参考方案9】:

对于遇到同样错误的人,我通过更改全局 ng.cmd 文件解决了问题。

C:\Users\userName\%AppData%\Roaming\npm

将以下代码复制/粘贴到您的 ng.cmd。

@IF EXIST "%~dp0\node.exe" (
  "%~dp0\node.exe" --max_old_space_size=8048 "%~dp0\node_modules\@angular\cli\bin\ng" %*
) ELSE (
  @SETLOCAL
  @SET PATHEXT=%PATHEXT:;.JS;=;%
  node --max_old_space_size=8048 "%~dp0\node_modules\@angular\cli\bin\ng" %*
)

【讨论】:

以上是关于关于资产优化的 Angular-cli 'JavaScript heap out of memory'的主要内容,如果未能解决你的问题,请参考以下文章

与 angular-cli 相比,使用 webpack + angular 无法实现相同级别的包优化

无法显示 Angular 下资产部分中列出的某些图像

带有快速项目的 angular-cli

带有primeng 404问题的angular-cli@webpack

使用 Angular-CLI 创建组件并将其添加到特定模块

在 Heroku 上构建 Angular 4 应用程序时,不包括资产