2020年9月

Node.js 编译前端代码内存堆溢出的简单处理方法

如果你遇到了诸如

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

的错误,说明内存超标。

可以通过下面方法解决:

  1. 直接在node允许的时候加相关参数:
$ node --max-old-space-size=4096 yourFile.js

这里将程序可用的最大内存空间增加到了4GB,一般情况下够用了。也可以根据自己的情况更改。

  1. 将相关参数作为环境变量添加进系统;

a. Linux/macOS:

export NODE_OPTIONS=--max-old-space-size=4096

b. Window

$env:NODE_OPTIONS="--max-old-space-size=8192"

基于 Angular 的网站前端性能优化

先看原来网站载入性能,Chrome Lighthouse得分6/100,可以说是没分数了:
微信截图_20200909160408.png

我们再看看生成的production环境js包大小:
微信截图_20200909203815.png

基本上违背了所有的前端最佳实践:

  1. 太多第三方Script (3.05MB)
  2. 整体JS体积太大了,一共13MB。而Opera Mini浏览器总共不过12.5MB,这个网站光js就比一个浏览器大。。
  3. 整体CSS体积太大了,4MB。
  4. 没有预加载等功能,整个网站需要下载玩这接近20MB数据,才能加载出来。

这个网站是Angular Cli 1.x的,首先升级到了1.7.4,将后端一些无用的接口删除,同时解决了大部分兼容问题,删去过不用和过时的package。然而似乎效果不大:
微信截图_20200912180931.png

由于Angular目前大版本号已经是10了,而1.7.4还是3年前的4。经过几年发展,已经跟以前很不一样。于是准备更新一下到9(考虑到兼容性)。但是也许是高估了Angular的向前兼容性或者1000+ Package的向前兼容性。升级到Angular Cli 9以后,经过两天接近30小时的修正,仍然运行不起来。太多地方要修改。。。

9.21 更新

可以通过使用 webpack-bundle-analyzer来分析build之后的包大小以及内容:

  1. 安装,为了防止不在PATH中,全局安装:npm i -g webpack-bundle-analyzer
  2. 创建stats.json,在build时增加一个--stats-json参数:
    ng build --prod --stats-json
  3. 分析:webpack-bundle-analyzer dist/stats.json(假如发布的文件夹为dist

可以得到下图:
bundle-ana.png

开启Gzip压缩传输内容,提高加载速度

由于网站的scripts和css一共将近17MB,不压缩传输实在是太忙了。发现IIS的确没有压缩,因为果断开启:

  1. 安装动态压缩功能和静态压缩功能
  2. 在IIS中开启相关设置

然后增加了22分呢:
微信图片编辑_20200922133633.jpg

9.22更新

秋分,发现用到了Salesforce的quill,并且在Angular的angular-cli.json配置里面。文件中的scripts全部都会被打包放入scripts.bundle.js作为全局scrpts。但是实际上只有一个demo页面,Primeng的p-editor在使用,果断删除。ng build --prod之后,scripts.bundle.js的大小缩减为了2.83MB

未完待续。。

https://docs.npmjs.com/cli-commands/prune.html
https://docs.npmjs.com/cli/dedupe
https://www.npmjs.com/package/@angular/compiler-cli
https://docs.npmjs.com/cli/shrinkwrap