我给项目加了性能守卫插件,同事叫我晚上别睡的太死-1

简介: 由于我组主要是负责的是H5移动端项目,老板比较关注性能方面的指标,比如首页打开速度,所以一般会关注FP,FCP等等指标,所以一般项目写完以后都会用lighthouse查看,或者接入性能监控系统采集指标.

由于我组主要是负责的是H5移动端项目,老板比较关注性能方面的指标,比如首页打开速度,所以一般会关注FP,FCP等等指标,所以一般项目写完以后都会用lighthouse查看,或者接入性能监控系统采集指标.

屏幕截图 2023-07-31 152705.png

但是会出现两个问题,如果采用第一种方式,使用lighthouse查看性能指标,这个得依赖开发自身的积极性,他要是开发完就Merge上线,你也不知道具体指标怎么样。如果采用第二种方式,那么同样是发布到线上才能查看。最好的方式就是能强制要求开发在还没发布的时候使用lighthouse查看一下,那么在什么阶段做这个策略呢。聪明的同学可能想到,能不能在CICD构建阶段加上策略。其实是可以的,谷歌也想到了这个场景,提供性能守卫这个lighthouse ci插件

性能守卫

性能守卫是一种系统或工具,用于监控和管理应用程序或系统的性能。它旨在确保应用程序在各种负载和使用情况下能够提供稳定和良好的性能。

Lighthouse是一个开源的自动化工具,提供了四种使用方式:

  • Chrome DevTools
  • Chrome插件
  • Node CLI
  • Node模块

屏幕截图 2023-07-31 152744.png

其架构实现图是这样的,有兴趣的同学可以深入了解一下

这里我们我们借助Lighthouse Node模块继承到CICD流程中,这样我们就能在构建阶段知道我们的页面具体性能,如果指标不合格,那么就不给合并MR

剖析lighthouse-ci实现

lighthouse-ci实现机制很简单,核心实现步骤如上图,差异就是lighthouse-ci实现了自己的server端,保持导出的性能指标数据,由于公司一般对这类数据敏感,所以我们一般只需要导出对应的数据指标JSON,上传到我们自己的平台就行了。

屏幕截图 2023-07-31 152844.png

接下里,我们就来看看lighthouse-ci实现步骤:

  1. 启动浏览器实例:CLI通过Puppeteer启动一个Chrome实例。
const browser = await puppeteer.launch();
  1. 创建新的浏览器标签页:接着,CLI创建一个新的标签页(或称为"页面")。
const page = await browser.newPage();
  1. 导航到目标URL:CLI命令浏览器加载指定的URL。
await page.goto('https://example.com');
  1. 收集数据:在加载页面的同时,CLI使用各种Chrome提供的API收集数据,包括网络请求数据、JavaScript执行时间、页面渲染时间等。
  2. 运行审计:数据收集完成后,CLI将这些数据传递给Lighthouse核心,该核心运行一系列预定义的审计。
  3. 生成和返回报告:最后,审计结果被用来生成一个JSON或HTML格式的报告。
const report = await lighthouse(url, opts, config).then(results => {
  return results.report;
});

  1. 关闭浏览器实例:报告生成后,CLI关闭Chrome实例。
await browser.close();
// 伪代码
const puppeteer = require('puppeteer');
const lighthouse = require('lighthouse');
const {URL} = require('url');
async function run() {
  // 使用 puppeteer 连接到 Chrome 浏览器
  const browser = await puppeteer.launch({
    headless: true,
    args: ['--no-sandbox', '--disable-setuid-sandbox'],
  });
  // 新建一个页面
  const page = await browser.newPage();
  // 在这里,你可以执行任何Puppeteer代码,例如:
  // await page.goto('https://example.com');
  // await page.click('button');
  const url = 'https://example.com';
  // 使用 Lighthouse 进行审查
  const {lhr} = await lighthouse(url, {
    port: new URL(browser.wsEndpoint()).port,
    output: 'json',
    logLevel: 'info',
  });
  console.log(`Lighthouse score: ${lhr.categories.performance.score * 100}`);
  await browser.close();
}
run();

导出的HTML文件

屏幕截图 2023-07-31 153416.png

导出的JSON数据

屏幕截图 2023-07-31 153801.png

实现一个性能守卫插件

在实现一个性能守卫插件,我们需要考虑以下因数:

  1. 易用性和灵活性:插件应该易于配置和使用,以便它可以适应各种不同的CI/CD环境和应用场景。它也应该能够适应各种不同的性能指标和阈值。
  2. 稳定性和可靠性:插件需要可靠和稳定,因为它将影响整个构建流程。任何失败或错误都可能导致构建失败,所以需要有强大的错误处理和恢复能力。
  3. 性能:插件本身的性能也很重要,因为它将直接影响构建的速度和效率。它应该尽可能地快速和高效。
  4. 可维护性和扩展性:插件应该设计得易于维护和扩展,以便随着应用和需求的变化进行适当的修改和更新。
  5. 报告和通知:插件应该能够提供清晰和有用的报告,以便开发人员可以快速理解和处理任何性能问题。它也应该有一个通知系统,当性能指标低于预定阈值时,能够通知相关人员。
  6. 集成:插件应该能够轻松集成到现有的CI/CD流程中,同时还应该支持各种流行的CI/CD工具和平台。
  7. 安全性:如果插件需要访问或处理敏感数据,如用户凭证,那么必须考虑安全性。应使用最佳的安全实践来保护数据,如使用环境变量来存储敏感数据。

屏幕截图 2023-07-31 153847.png

// 伪代码
//perfci插件
const puppeteer = require('puppeteer');
const lighthouse = require('lighthouse');
const { port } = new URL(browser.wsEndpoint());
async function runAudit(url) {
  const browser = await puppeteer.launch();
  const { lhr } = await lighthouse(url, {
    port,
    output: 'json',
    logLevel: 'info',
  });
  await browser.close();
  // 在这里定义你的性能预期
  const performanceScore = lhr.categories.performance.score;
  if (performanceScore < 0.9) { // 如果性能得分低于0.9,脚本将抛出错误
    throw new Error(`Performance score of ${performanceScore} is below the threshold of 0.9`);
  }
}
runAudit('https://example.com').catch(console.error);

使用

name: CI
on: [push]
jobs:
  lighthouseci:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - run: npm install && npm install -g @lhci/cli@0.11.x
      - run: npm run build
      - run: perfci autorun

目录
相关文章
|
JSON JavaScript 前端开发
继续死磕前端
继续死磕前端
|
16天前
|
JavaScript 前端开发 Java
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法,包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明,并提供了示例代码。文章强调了函数的学习应结合源码和实践,适合JavaScript初学者和进阶开发者参考。
29 2
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
|
3月前
|
存储 算法 Oracle
不好意思!耽误你的十分钟,JVM内存布局还给你
先赞后看,南哥助你Java进阶一大半在2006年加州旧金山的JavaOne大会上,一个由顶级Java开发者组成的周年性研讨会,公司突然宣布将开放Java的源代码。于是,下一年顶级项目OpenJDK诞生。Java生态发展被打开了新的大门,Java 7的G1垃圾回收器、Java 8的Lambda表达式和流API…大家好,我是南哥。一个Java学习与进阶的领路人,相信对你通关面试、拿下Offer进入心心念念的公司有所帮助。
不好意思!耽误你的十分钟,JVM内存布局还给你
|
6月前
|
设计模式 前端开发 JavaScript
一秒开挂!工厂模式让你告别重复代码!
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
前端开发 JavaScript 安全
全程无尿点,死磕前端~
全程无尿点,死磕前端~
|
运维 JavaScript 前端开发
不知道中午应该吃什么?用vue写个实例帮我们抉择吧
不知道中午应该吃什么?用vue写个实例帮我们抉择吧
145 0
|
JavaScript 中间件 测试技术
Vite 太快了,烦死了,是时候该小睡一会了。
在知乎看参与 Vue Conf 2021 是怎样的体验?[1]这个问题的时候,偶然发现 Anthony Fu 的回答里提到了一个好玩的凡尔赛插件:vite-plugin-sleep[2]。
|
存储 机器学习/深度学习 监控
我是傻x,被迫看了 1 天源码,千万别学我!
大家好,我是零一,之前一直很忙,业余时间的输入和输出都 24k铝合金人眼可见 得下降,这不最近上海疫情严重么,算了一下居家办公也已经将近 1个月了,这才有些许时间学习,所以最近也是一直在鼓捣点新东西,不为别的,主要是想再多输入一些新的知识
176 0
我是傻x,被迫看了 1 天源码,千万别学我!
|
芯片
程序人生 - 手上总有静电该怎么处理?
程序人生 - 手上总有静电该怎么处理?
145 0
程序人生 - 手上总有静电该怎么处理?