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…