Lighthouse 是一款检测网页质量的自动化工具，Google 提供的开源软件，任何网站都可以免费使用。可以检查的网站性能、可访问性、SEO 等，并给出优化建议。
安装 Lighthouse 作为一个全局节点模块。
npm install -g lighthouse
使用方法
lighthouse http://www.baidu.com/
痛点：这样就可以直接生成当前页面的性能分析报告，但是每次生成都需要自己手动去执行然后生成静态的html文件，就显得很麻烦。
因此我在lighthouse的github上找到一款比较好的开源库ci能解决这个痛点。
也就是Lighthouse ci & Lighthouse CI Server的一起使用，首先他们的配置都很简单，ci主要用来配置项目中有那些页面是需要输出分析报告的，然后你可以具体配置它的巡检次数、配置的网络环境、审查种类等，巡检完后它会把结果上传到你的Lighthouse CI Server上，然后可以可视化展示结果。
可能有人会疑惑，上传到服务器上，难道还需要自己写一套展示界面，写接口接受数据巴拉巴拉的吗？
其实不是的，Lighthouse CI Server都帮我们做好了。
简单的起一个lighthouse server
npm init -y
npm install @lhci/server sqlite3
然后在package.json配置好脚本启动命令
{
"name": "lh-server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"lhci:server": "lhci server --storage.storageMethod=sql --storage.sqlDialect=sqlite --storage.sqlDatabasePath=./db.sql --basicAuth.username=admin --basicAuth.password=123456 --port=18405"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@lhci/server": "^0.9.0",
"sqlite3": "^5.0.4"
}
}
启动server
npm run lhci:server
当你看到 terminal输出 Server listening on port 18405的时候就说明服务成功启动在18405端口上
然后网页上直接访问http://localhost:18405/ 你会看到
要输入账号密码？ 不要慌，因为你上面的启动命令配置了账号密码为admin/123456，如果不要也可以不设置。 所以进来后的页面是这样滴
现在它提示你要去初始化自己的项目了，那怎么跟自己的项目建立联系呢？
首先去到你要分析的项目里安装包
npm install @lhci/cli
然后在项目中执行指令生成token
lhci wizard
咱们是构建新项目就第一个回车
然后选择指定哪个地址是你要部署的服务器地址、项目名字、代码仓库地址、指定哪个分支
生成了build token和admin token。（记得保存好）
然后你发现你启动的lighthouse server上面多了一个lh-test的项目
点击右边的配置，并在admin token处把token复制进去保存，你就拥有当前项目的管理权啦
然后去到你要巡检的项目中的根目录中配置好lighthouse ci的配置项
//lighthouserc.js文件
module.exports = {
ci: {
collect: {
// 配置启动的命令
// startServerCommand: 'yarn run dev',
// 测试的页面，可配置多个，如果是开启startServerCommand，则可以跑当前项目的页面，不开启的话可以写死
url: ['http://www.baidu.com/'],
// 运行次数，默认3次
numberOfRuns: 3,
settings: {
// 根据实际配置，完整settings可看文档 https://github.com/GoogleChrome/lighthouse/blob/575e29b8b6634bfb280bc820efea6795f3dd9017/types/externs.d.ts#L141-L186
// 只审查某分类
onlyCategories: ['performance'],
// 只执行部分审查
onlyAudits: ['first-meaningful-paint', 'speed-index','interactive'],
// 跳过某些审查
// skipAudits:[],
// 配置网络
throttling:{}，
// 配置查看报告的网站是否中文，默认是英文
//locale: "zh",
}
},
upload: {
// 刚才生成指令时所配置好的服务器上传地址，build token需要填进去。
serverBaseUrl: "http://localhost:9001",
token: "1b1b68de-d2f7-44a5-9d42-39f9fc4a6b82",
basicAuth: {
username: "admin",
password: "123456"
}
},
}
}
然后终于可以运行咱们的ci了
lhci autorun
结果如下
我们发现两个警告，一个我没有配置guthub的token，另一个是我没有生成commit hash，因为我没有做任何的git提交哈，它需要这个hash是想每次运行得到的结果跟上次的结果比较，而它是拿hash值来做区分，因此我建议每次巡检前都做一定的修改commit后再执行lhci autorun哈
我这里其实已经成功把分析报告上传到咱们的服务器中去了，点进来发现我们已经有了第一次提交记录了
我们可以点击进去查看report
报告详情
总结：这里仅仅是demo跑通了，带大家入门使用，后续还需要把自己的lighthouse server部署到线上服务器上然后初始化跑起来，配置项也可以深度挖掘，找到适合自己业务贴合的配置项。然后自己的项目还可以配合git action或者gitlab的workflow中配置脚本，在项目完成构建后执行一下巡检，就可以自动把当此的构建结果提交到服务器上面，直接访问服务器地址就可以查看分析报告，根据它的性能指标来指定页面的优化方案。
后面补充一下扩展知识
如何配置不同的网络环境比如快3G和LTE4G，参考lighthouse网络配置
在lighthouserc.js文件中settings的throttling中配置 快 3G 配置项
throttling: {
rttMs: 170, //往返时间（毫秒）
throughputKbps: 9 * 1024, //网络吞吐量（千比特每秒）
requestLatencyMs: 170 * 3.75, //网络请求延迟（毫秒）
downloadThroughputKbps: 9 * 1024 * 0.9, //网络下载吞吐量（千比特/秒）
//uploadThroughputKbps: 900 * 0.9, //网络上载吞吐量（千比特/秒）
cpuSlowdownMultiplier: 4, //应用于cpu的减速量
}
LET4G 配置项
throttling: {
rttMs: 70, //往返时间（毫秒）
throughputKbps: 12 * 1024, //网络吞吐量（千比特每秒）
requestLatencyMs: 70 * 3.75, //网络请求延迟（毫秒）
downloadThroughputKbps: 12 * 1024 * 0.9, //网络下载吞吐量（千比特/秒）
cpuSlowdownMultiplier: 4, //应用于cpu的减速量
},
lighthouse性能指标介绍
1、First Contentful Paint（首次内容绘制）
首次内容渲染时间标记了渲染出首个文本或首张图片的时间。
2、Time to Interactive（可交互时间）
可交互时间是指网页需要多长时间才能提供完整交互功能。
3、Speed Index（显示页面可见部分时间）
速度指数表明了网页内容的可见填充速度。
4、Total Blocking Time(总阻塞时间）
首次内容渲染 (FCP) 和可交互时间之间的所有时间段的总和，当任务用时超过 50 毫秒时，该数值以毫秒表示。
5、Largest Contentful Paint（可视区最大内容出现在屏幕上的时间点）
Largest Contentful Paint 标记了渲染出最大文本或图片的时间。
6、Cumulative Layout Shift（累计布局位移）
“累积布局偏移”旨在衡量可见元素在视口内的移动情况。
更多可以查看
相关阅读
您阅读本篇文章共花了：
发表评论