web网页性能分析利器 - Lighthouse灯塔

原创 码农  2020-01-02 12:22:00  阅读 508 次 评论 0 条

不管是后端程序猿还是网页前端开发工程师,还是测试猿,都是非常关注前端的性能,比如,网页加载时间,SEO优化等等。那么有没有这样一个工具,可以帮助我们分析前端的性能呢?


有的,他就是网页性能分析利器:Lighthouse - 灯塔


web网页性能分析利器 - Lighthouse灯塔 建站 第1张

今天我们一起来看看Lighthouse的安装,配置,以及一些高级用法吧


1. Chrome插件方式的安装和使用

2. Node方式的安装和使用

3. Node方式下的建议和插件推荐

4. 编程模式下使用Lighthouse, 可结合CI/CD

web网页性能分析利器 - Lighthouse灯塔 建站 第2张

1. Chrome插件方式的安装和使用


这个方法可以直接的在Chrome浏览器上安装Lighthouse,并在Chrome上直接使用


1. 工具地址 (需要VPN):

https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en


2. 解决VPN的问题:

如果你没有VPN,但是想下载这个工具,去这个网址https://chrome-extension-downloader.com/,搜索:blipmdconlkpinefehnmjammfjpmpbjk,下载后,手动安装到Chrome中


安装完成后,可以在浏览器的右上角发现一个灯塔的图标:web网页性能分析利器 - Lighthouse灯塔 建站 第3张


3. 使用方法一:

打开想要测试的页面,比如百度:https://www.baidu.com

-> 点击灯塔图标

-> 点击Generate Report即可


但是请注意:

1. 这个方法,只对互联网上可以访问的页面地址生效,如果是我们的内网的页面,还没有正式发布,比如http://127.0.0.1:8080, 是不能用这个方法的,可以使用方法二

2. 这个方法是直接访问github上的接口:https://googlechrome.github.io/lighthouse/viewer/,如果不用VPN的话,在国内使用会稍微有点慢


web网页性能分析利器 - Lighthouse灯塔 建站 第4张


4. 使用方法二:

这个方法使用在内部的,还没有正式上线的项目


打开想要测试的页面,比如百度:https://www.baidu.com

-> 右键页面,选择“检查元素 (inspect)”

-> 找到Audit

-> 选择好自己想要的属性

-> 点击“Run audits”,等待结果

-> 把结果导出为HTML/JSON/CSV


但是请注意:这个方法会直接连接到Google那边的接口,在国内必须先连接VPN才能使用


web网页性能分析利器 - Lighthouse灯塔 建站 第5张

web网页性能分析利器 - Lighthouse灯塔 建站 第6张

2. Node方式的安装和使用


Lighthouse还提供了NodeJS包,我们可以直接通过NPM进行安装即可


1. 安装命令:

# 注意:Lighthouse需要 Node 10 LTS (10.13) 或更高的版本.
npm install -g lighthouse
# 或者使用yarn:
# yarn global add lighthouse


安装完成后,更多信息可以查阅:

https://github.com/GoogleChrome/lighthouse#user-content-using-the-node-cli


2. 运行Lighthouse:

# 以百度为例,输入下面的命令即可:
lighthouse https://www.baidu.com/
# 完成后,可以查看HTML报告


web网页性能分析利器 - Lighthouse灯塔 建站 第7张

web网页性能分析利器 - Lighthouse灯塔 建站 第8张

3. Node方式下的建议和插件推荐


1. 建议:

在Node CLI模式下,lighthouse会在我们第一次运行的时候,提示我们说:may we anonymously report runtime exceptions to improve the tool over time


意思是:同不同意发送错误的信息给开发团队,来帮助他们更好的提升lighthouse的质量


web网页性能分析利器 - Lighthouse灯塔 建站 第9张


我们当然愿意,而且就算我们什么都不操作,等几秒后,程序也会继续接着执行


可是如果我们在docker环境中安装了lighthouse,那么每次启动新的容器,这个问题就会每次问一遍,有点小烦人


该怎么解决呢?


通过查看官方文档:https://github.com/GoogleChrome/lighthouse/blob/master/docs/error-reporting.md


直接将参数--no-enable-error-reporting加到lighthouse中即可,比如:

lighthouse https://www.baidu.com --no-enable-error-reporting


2. 插件推荐:

如果我们想要一次性跑多个页面该怎么办呢?


有一个很酷的插件,可以帮我们解决这类问题,叫做:lighthouse-batch


支持用逗号隔开多条页面地址,支持读取文件,支持生成一个summary报告等等

# 安装
# 更多可以查看:https://github.com/mikestead/lighthouse-batch
npm install lighthouse-batch -g

# 跑多条
lighthouse-batch -s https://www.bbc.com,https://housing.com
web网页性能分析利器 - Lighthouse灯塔 建站 第10张

4. 编程模式下使用Lighthouse, 可结合CI/CD


上面我们所讨论的都是手动,或者用命令的方法使用Lighthouse


那么如果我们想把lighthouse集成到CI/CD,该怎么更灵活的去做呢?


1. 前提条件 - 安装mocha:

mocha是JS下的一个测试框架,更多可以查看:https://mochajs.org/

# 在当前系统环境下安装mocha,这是必须的前提条件
npm install -g mocha


2. 下面是一个demo.js:

依次检查Lighthouse各个关键指标是否满足我们的测试需求:


> accessibility的分数要大于90

> best practices的分数要大于90

> seo的分数要大于90

>  pwa的分数要大于90

// 源代码来源于:https://github.com/rishichawda/lighthouse-mocha-example
// 我这里做了中文注释解释, 和些许修改,方便小哥哥,小姐姐消化吸收
// 更多Lighthouse的二次开发:https://izifortune.com/lighthouse-architecture-demystified

const { assert } = require('chai')
const lighthouse = require('lighthouse')
const chromeLauncher = require('chrome-launcher')
const Table = require('cli-table')
const { promisify } = require('util');
const { writeFile } = require('fs')
const pWriteFile = promisify(writeFile)

// 更多关于Lighthouse的设置:
// https://github.com/GoogleChrome/lighthouse/blob/master/docs/configuration.md
const config = require('./config.json')

const table = new Table()

// 设置百度为测试URL
const testUrl = 'https://www.baidu.com/'

function launchChromeAndRunLighthouse(url, opts, conf = null) {
  return chromeLauncher.launch({ chromeFlags: opts.chromeFlags }).then(chrome => {
    opts.port = chrome.port
    return lighthouse(url, opts, conf).then(res =>
      /* 使用 results.lhr,这样JS就能读取lighthouse返回的数据
      * 更多: https://github.com/GoogleChrome/lighthouse/blob/master/types/lhr.d.ts
      * results.report: HTML/JSON/CSV输出为一个string类型
      * results.artifacts: 其他你需要的,比如trace/screenshots等
      */
      chrome.kill().then(() => [res.report, res.lhr])
    )
  })
}

const opts = {
  // 更过关于Chrome Flags:https://peter.sh/experiments/chromium-command-line-switches
  chromeFlags: ['--ignore-certificate-errors'],
  output: 'html'
}

describe('Lighthouse Testing', function () {
  // 根据项目的特点,合理设置Timeout,单位为毫秒.
  this.timeout(120000)
  let results
  before('run base test', done => {
    launchChromeAndRunLighthouse(testUrl, opts, config).then(res => {
      // 生成HTML报告
      pWriteFile('report.html', res[0])
      results = Object.keys(res[1].categories).reduce((merged, category) => {
        merged[category] = res[1].categories[category].score
        return merged
      }, {})
      done()
    })
  })

  // performance的分数要大于90
  it('should have performance score greater than 90', done => {
    assert.equal(results.performance > 0.9, true)
    done()
  })

  // accessibility的分数要大于90
  it('should have accessibility score greater than 90', done => {
    assert.equal(results.accessibility > 0.9, true)
    done()
  })

  // best practices的分数要大于90
  it('should have best practices score greater than 90', done => {
    assert.equal(results['best-practices'] > 0.9, true)
    done()
  })

  // seo的分数要大于90
  it('should have seo score greater than 90', done => {
    assert.equal(results.seo > 0.9, true)
    done()
  })

  // pwa的分数要大于90
  it('should have pwa score greater than 90', done => {
    assert.equal(results.pwa > 0.9, true)
    done()
  })

  after(() => {
    Object.keys(results).forEach(category => {
      table.push([category, Math.round(results[category] * 100)])
    })
    // 以表格的形式在命令行中输出结果
    // 注意:这个功能可有可无,因为lighhouse会为我们生成很专业的HTML报告
    console.log(table.toString())
  })
})


3. 根据项目的需求准备config.json:

更多关于lighthouse的配置信息,可以去官方查看:

https://github.com/GoogleChrome/lighthouse/blob/master/docs/configuration.md

{  "extends": "lighthouse:full"}


4. 安装依赖:

假设上面的两个文件demo.js, config.json都放在test文件夹中

cd test
npm install lighthouse chrome-launcher chai cli-table fs util --save-dev


5. 执行测试

使用mocha执行测试

mocha demo.js
# 测试完成后,可以查看测试用例状态,也可以查看html报告


所以最后完整的一套命令为:

# 假设所有的文件都放到了test文件夹中
cd test
# 安装依赖
npm install lighthouse chrome-launcher chai cli-table fs util --save-dev
# 执行测试
mocha demo.js

web网页性能分析利器 - Lighthouse灯塔 建站 第11张


好的,今天就到这里了

本文地址:https://www.itcodeit.com/post/39.html
版权声明:本文为原创文章,版权归 码农 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?