基于 Angular 的网站前端性能优化
先看原来网站载入性能,Chrome Lighthouse得分6/100,可以说是没分数了:
我们再看看生成的production环境js包大小:
基本上违背了所有的前端最佳实践:
- 太多第三方Script (3.05MB)
- 整体JS体积太大了,一共13MB。而Opera Mini浏览器总共不过12.5MB,这个网站光js就比一个浏览器大。。
- 整体CSS体积太大了,4MB。
- 没有预加载等功能,整个网站需要下载玩这接近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之后的包大小以及内容:
- 安装,为了防止不在
PATH
中,全局安装:npm i -g webpack-bundle-analyzer
- 创建
stats.json
,在build时增加一个--stats-json
参数:ng build --prod --stats-json
- 分析:
webpack-bundle-analyzer dist/stats.json
(假如发布的文件夹为dist
)
可以得到下图:
开启Gzip压缩传输内容,提高加载速度
由于网站的scripts和css一共将近17MB,不压缩传输实在是太忙了。发现IIS的确没有压缩,因为果断开启:
- 安装动态压缩功能和静态压缩功能
- 在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