blog 一招让Angular-cli速度增强

随着项目越来越大，现在模块已经有100多个了，一开始我想着把它们拆开，打算使用angular-cli提供的自定义库的功能(ng generate library my-lib)，发现有个bug，我自己摸索一下，算是解决这个bug，下次把它贴出给大家遛遛。

我们还是要解决暂时的问题，打包慢，还有打包会失败的问题：

Q3MV6X5R@I$XR(4@70)QMS

我们使用的是jenkins自动打包。

在我本地打包了5次成功了1次，全是这个错误。

其实这个问题也是算是nodejs的锅了。那我们需要解决，不然怎么继续愉快的玩耍。

找问题得到答案：修改node --max_old_space_size=size

这个size随意，大概就是1024*n，推荐4和8，看你自己系统的内存吧，合理选择，我电脑16g，选择的是8。

最后结果就是：node --max_old_space_size=8192。（数学问题不用我教了）

因为angular-cli是我们每次npm install都会自动安装，如果我直接去改.bi/ng这个命令不是很靠谱，一次重装你就回到解放前了。

在写Angular时候，满屏的装饰器，也有一个对应的设计模式叫装饰器模式，允许向一个现有的对象添加新的功能，同时又不改变其结构。简单理解是不改变原有的功能，给它去添加新功能。我们需要这样思路。

我们可以最简单的去复制.bi/ng，这个玩意叫shell命令，其实我不会玩。

话不多说，开始干活。

在项目的根创建一个scripts文件夹，以后需要写脚本都可以丢进去。
在scripts创建一个ng.sh文件。

#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")

case `uname` in
    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
esac

if [ -x "$basedir/node" ]; then
  "$basedir/node" --max_old_space_size=8192 "./node_modules/@angular/cli/bin/ng" "$@"
  ret=$?
else
  node --max_old_space_size=8192 "./node_modules/@angular/cli/bin/ng" "$@"
  ret=$?
fi
exit $ret

这是.bin/ng的代码：

#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")

case `uname` in
    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
esac

if [ -x "$basedir/node" ]; then
  "$basedir/node"  "$basedir/../@angular/cli/bin/ng" "$@"
  ret=$?
else
  node  "$basedir/../@angular/cli/bin/ng" "$@"
  ret=$?
fi
exit $ret

其实没有太大的改变，这个意思先告诉nodejs设置--max_old_space_size=8192，然后再去运行angular-cli命令。

怎么使用：

你创建的一个新项目或者正在使用的项目，package.json画风应该是这样的:

{
...
"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
...
}

这里ng指向就是.bin/ng。

这里我们需要去修改一下代码：

{
...
"scripts": {
    "ng": "ng",
    "start": "bash ./scripts/ng.sh serve",
    "build": "bash ./scripts/ng.sh build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
...
}

同样的代码规模模块，同样的操作，我们来做下对比：

开发状态：

bash ./scripts/ng.sh serve运行一次需要56s
ng serve运行一次需要62s

发布状态:

bash ./scripts/ng.sh build运行一次需要1分55秒 每次都成功
ng build运行一次需要5分35秒 打包三次才成功

相信很多人会卡在75%和92%这个2个点上面。现在大家看到了吧，没有对比就没有伤害。

最后：build一定要加，serve根据自己需求吧。差别也不大，6s左右。赶紧给你build提速吧，再也不用看到<------ JS stacktrace ------>错误啦。这个不光适用于angular-cli，react的cli也有个这个问题。看了上面你应该也会改了。

重要：发现一个bug，上面ng.sh代码本身在windows上面没有毛病，去jenkins就报错了，我让后台帮我修复一下错误。克隆或者下载项目，使用scripts/ng.sh即可。

当然也可以使用更简单的方式: 传送门

"scripts": {
    "ng-high-memory": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng",
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
},

Apr 18 '19 01:04 jiayisheji

大佬

Apr 18 '19 06:04 Super404

为啥不在package.json的scripts里直接写

Oct 14 '19 07:10 nthsky

node --max_old_space_size=4096 node_modules/@angular/cli/bin/ng build --prod

Nov 05 '19 00:11 soakit

有用，点赞！！另外windows环境下需要安装cygwin环境来支持bash

Nov 05 '19 02:11 4everYoungg

blog blog copied to clipboard

一招让Angular-cli速度增强

blog
blog copied to clipboard