在前端開發(fā)中，對(duì)于自己開發(fā)的app或者web page性能的好壞，一直是讓前端開發(fā)很在意的話題。我們需要專業(yè)的網(wǎng)站測(cè)試工具，讓我們知道自己的網(wǎng)頁(yè)還有哪些需要更為優(yōu)化的方面，我自己嘗試了一款工具：Lighthouse，感覺還不錯(cuò)，記錄下來(lái)，也順便分享給用得著的伙伴。

Lighthouse分析web應(yīng)用程序和web頁(yè)面，收集關(guān)于開發(fā)人員最佳實(shí)踐的現(xiàn)代性能指標(biāo)和見解，讓開發(fā)人員根據(jù)生成的評(píng)估頁(yè)面，來(lái)進(jìn)行網(wǎng)站優(yōu)化和完善，提高用戶體驗(yàn)。

1、在chrome開發(fā)者工具中使用lighthouse

Lighthouse是直接集成到chrome開發(fā)者工具中的，位于‘Audits’面板下。

首先，你得下載安裝 了chrome瀏覽器，相信每個(gè)做開發(fā)的人員都應(yīng)該擁有chrome瀏覽器。

其次，在chrome瀏覽器中打開你需要測(cè)試的網(wǎng)站，按f12進(jìn)入開發(fā)者調(diào)試模式，點(diǎn)擊‘Audits’選項(xiàng)，看到如下界面：

然后點(diǎn)擊“Run audits”，之后就是等待生成評(píng)估界面。

2、使用Node Cli

lighthouse依賴node 8或者更高的node版本

首先全局安裝lighthouse:

npm install -g lighthouse
# or use yarn:
# yarn global add lighthouse

然后在終端輸入命令，我使用的是博客園首頁(yè)地址

$ lighthouse https://www.cnblogs.com/

然后會(huì)生成一個(gè)評(píng)估的html頁(yè)面，直接在瀏覽器中打開進(jìn)行查看即可。

在這里面你可以看到它給你各個(gè)方面的建議，比如圖片、css、js這些文件的處理，還有html里面標(biāo)簽的使用，緩存處理等建議，可以根據(jù)這些來(lái)對(duì)網(wǎng)站進(jìn)行優(yōu)化。

3、附上Lighthouse的git地址，更為詳細(xì)的內(nèi)容，可以去參考git：https://github.com/GoogleChrome/lighthouse