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

先看原来网站载入性能，Chrome Lighthouse得分6/100，可以说是没分数了：

我们再看看生成的production环境js包大小：

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

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。然而似乎效果不大：

由于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）

可以得到下图：

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

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

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

然后增加了22分呢：

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