Pt -- 一个简易的网页性能报告工具

• 最近看到很多electronjs的文章, 而且想做点小工具. 所以就有Pt
• 很久没看angular了(之前看的时候是2, 现在8都RC了), 所以放弃了日常使用的Vue, 复习下angular 
• 性能相关的自己所学不多, 所以想依靠chrome, 所以看上了Puppeteer 

先看个动图吧:

 好了理由说完了, 说下基本的过程吧. 当然重要的是这个学习的过程. 

 脚手架: https://github.com/maximegris/angular-electron 

 然后做了几个步骤: 

• 整合pupeteer, 我这里使用了 pupeteer-core, 所以需要机器上自带chrome 
• 整合下material (angular 生态里UI库确实还不太行, material还是那么拖后腿)
• 看了2天angular官网走了一遍hero
• electronjs部分基本都是官网和参考例子(github.com/hokein/elec…)

基本想法:

需要一些现成的数据:

资源使用率 - 这个貌似很多人都不太重视. 

lighthouse 报告-  这个比较全面

其实,我们组里的很多前端都没用过上面两个东西.

获取数据:

puppeteer整合完了, 参考例子 github.com/GoogleChrom…

使用率方面我是改了例子的代码, 生成一个数组出来, 例子里是输出到终端了.

lighthouse基本就是直接拿来用的, 改的地方不多.

展示:

Material的Table 来做列表,这里也自己写了个pipe. 而且觉得angular的组件真的不太强大...

search button加个缩放小动画

lighthouse button 来个透明度小动画

使用率进度条来个width的动画

别看就一个页面, animation还用上了. 

----

lighthouse报告展示的问题,因为拿到的是一个整页面. 所以开始考虑的方向就是iframe这种. 官方不推荐webview. 最终选择了新开一个子window. 这个报告相对独立. 自带亮暗两种主题, 默认是亮的, 为了配合我列表页的颜色, 我用代码改成了暗主题.

打包:

我打包搜了好久, 最后的方法是 Travis上打linux的包, 本地 MBP 打mac的dmg. windows还没弄, 看其他人文章是需要另一个CI.

Logo:

我们的设计师同学不爱帮忙, 所以我找了对面可爱的前端小伙伴设计了.  鄙视下不会PS的自己. 设计方面自己还真的挺想学下的.

一些问题:

有些网站经常会报错, 超时什么的. 这个还得继续看看是什么情况, 难道SPA的 都不行?

有经验的大佬请留言, 给小弟点思路.

仓库地址:

github.com/dreambo8563…