前端打包加个性能插件检测~性能不过关就发邮件告诉领导！

于 2023-07-19 08:42:43 发布
阅读量196 收藏
点赞数 1
文章标签： 前端
原文链接：https://mp.weixin.qq.com/s?__biz=MzUxNzk1MjQ0Ng==&mid=2247515325&idx=1&sn=ceccd4f7d62a92309e9db73cf0547e4c&chksm=f992ba6ccee5337adea2c6a754f493ce2f15d9b7a3c04ed98aa83d09f84b26ffa952b428c2bb&scene=126&sessionid=0
版权

大厂技术  高级前端  Node进阶

点击上方 程序员成长指北，关注公众号

回复1，加入高级Node交流群

前言

大家好，我是考拉🐨，分享一篇好文~

ac69df0615e4be3a34e93516d58a5e78.png

引言

给组内的项目都在CICD流程上更新上了性能守卫插件，效果也还不错，同事还疯狂夸奖我

d6adcc5cda2ebec3086a66323b9a5066.jpeg
WX20230708-170807@2x.png

接下里进入我们的此次的主题吧

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

e7b85b7cbd58cacb94fd53da7f7ed0f4.jpeg
WX20230708-141706@2x.png

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

性能守卫

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

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

  • Chrome DevTools

  • Chrome插件

  • Node CLI

  • Node模块

0855179b8e7de41bfad340f34171a08e.jpeg
image.png

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

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

剖析lighthouse-ci实现

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

b5096f42640ee5c44439573239116fac.jpeg
image.png

接下里，我们就来看看lighthouse-ci实现步骤：

  • javascript
复制代码
const browser = await puppeteer.launch();

  1. 启动浏览器实例：CLI通过Puppeteer启动一个Chrome实例。

javascript
复制代码
const page = await browser.newPage();

  1. 创建新的浏览器标签页：接着，CLI创建一个新的标签页（或称为"页面"）。

javascript
复制代码
await page.goto('https://example.com');

  1. 导航到目标URL：CLI命令浏览器加载指定的URL。

  1. 收集数据：在加载页面的同时，CLI使用各种Chrome提供的API收集数据，包括网络请求数据、JavaScript执行时间、页面渲染时间等。

  1. 运行审计：数据收集完成后，CLI将这些数据传递给Lighthouse核心，该核心运行一系列预定义的审计。

javascript
复制代码
const report = await lighthouse(url, opts, config).then(results => {
  return results.report;
});

  1. 生成和返回报告：最后，审计结果被用来生成一个JSON或HTML格式的报告。

javascript
复制代码
await browser.close();

  1. 关闭浏览器实例：报告生成后，CLI关闭Chrome实例。

js
复制代码
// 伪代码
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文件

55ad80f16678356d11ad62a74ce1e753.jpeg
image.png

导出的JSON数据

4d75fe8f48183344cdbc2b45c336ad33.jpeg
image.png

实现一个性能守卫插件

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

  1. 易用性和灵活性：插件应该易于配置和使用，以便它可以适应各种不同的CI/CD环境和应用场景。它也应该能够适应各种不同的性能指标和阈值。

  1. 稳定性和可靠性：插件需要可靠和稳定，因为它将影响整个构建流程。任何失败或错误都可能导致构建失败，所以需要有强大的错误处理和恢复能力。

  1. 性能：插件本身的性能也很重要，因为它将直接影响构建的速度和效率。它应该尽可能地快速和高效。

  1. 可维护性和扩展性：插件应该设计得易于维护和扩展，以便随着应用和需求的变化进行适当的修改和更新。

  1. 报告和通知：插件应该能够提供清晰和有用的报告，以便开发人员可以快速理解和处理任何性能问题。它也应该有一个通知系统，当性能指标低于预定阈值时，能够通知相关人员。

  1. 集成：插件应该能够轻松集成到现有的CI/CD流程中，同时还应该支持各种流行的CI/CD工具和平台。

  1. 安全性：如果插件需要访问或处理敏感数据，如用户凭证，那么必须考虑安全性。应使用最佳的安全实践来保护数据，如使用环境变量来存储敏感数据。

1b46d4d7e4d2391f4afe3b267cff93b9.jpeg
image.png 
js
复制代码
// 伪代码
//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);

使用

js
复制代码
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

性能审计

js
复制代码
const lighthouse = require('lighthouse');
const puppeteer = require('puppeteer');
const nodemailer = require('nodemailer');

// 配置邮件发送器
const transporter = nodemailer.createTransport({
  service: 'gmail',
  auth: {
    user: 'your-email@gmail.com',
    pass: 'your-password',
  },
});

// 定义一个函数用于执行Lighthouse审计并处理结果
async function runAudit(url) {
  // 通过Puppeteer启动Chrome
  const browser = await puppeteer.launch({ headless: true });
  const { port } = new URL(browser.wsEndpoint());

  // 使用Lighthouse进行性能审计
  const { lhr } = await lighthouse(url, { port });

  // 检查性能得分是否低于阈值
  if (lhr.categories.performance.score < 0.9) {
    // 如果性能低于阈值，发送警告邮件
    let mailOptions = {
      from: 'your-email@gmail.com',
      to: 'admin@example.com',
      subject: '网站性能低于阈值',
      text: `Lighthouse得分：${lhr.categories.performance.score}`,
    };
    
    transporter.sendMail(mailOptions, function(error, info){
      if (error) {
        console.log(error);
      } else {
        console.log('Email sent: ' + info.response);
      }
    });
  }

  await browser.close();
}

// 使用函数
runAudit('https://example.com');

接下来，我们分步骤大概介绍下几个核心实现

数据告警

js
复制代码
// 伪代码
const lighthouse = require('lighthouse');
const puppeteer = require('puppeteer');
const nodemailer = require('nodemailer');

// 配置邮件发送器
const transporter = nodemailer.createTransport({
  service: 'gmail',
  auth: {
    user: 'your-email@gmail.com',
    pass: 'your-password',
  },
});

// 定义一个函数用于执行Lighthouse审计并处理结果
async function runAudit(url) {
  // 通过Puppeteer启动Chrome
  const browser = await puppeteer.launch({ headless: true });
  const { port } = new URL(browser.wsEndpoint());

  // 使用Lighthouse进行性能审计
  const { lhr } = await lighthouse(url, { port });

  // 检查性能得分是否低于阈值
  if (lhr.categories.performance.score < 0.9) {
    // 如果性能低于阈值，发送警告邮件
    let mailOptions = {
      from: 'your-email@gmail.com',
      to: 'admin@example.com',
      subject: '网站性能低于阈值',
      text: `Lighthouse得分：${lhr.categories.performance.score}`,
    };
    
    transporter.sendMail(mailOptions, function(error, info){
      if (error) {
        console.log(error);
      } else {
        console.log('Email sent: ' + info.response);
      }
    });
  }

  await browser.close();
}

// 使用函数
runAudit('https://example.com');

处理设备、网络等不稳定情况

js
复制代码
// 伪代码

// 网络抖动
const { lhr } = await lighthouse(url, {
  port,
  emulatedFormFactor: 'desktop',
  throttling: {
    rttMs: 150,
    throughputKbps: 1638.4,
    cpuSlowdownMultiplier: 4,
    requestLatencyMs: 0,
    downloadThroughputKbps: 0,
    uploadThroughputKbps: 0,
  },
});


// 设备
const { lhr } = await lighthouse(url, {
  port,
  emulatedFormFactor: 'desktop', // 这里可以设定为 'mobile' 或 'desktop'
});

用户登录态问题

也可以让后端同学专门提供一条内网访问的登录态接口环境，仅用于测试环境

js
复制代码
const puppeteer = require('puppeteer');
const lighthouse = require('lighthouse');
const fs = require('fs');
const axios = require('axios');
const { promisify } = require('util');
const { port } = new URL(browser.wsEndpoint());

// promisify fs.writeFile for easier use
const writeFile = promisify(fs.writeFile);

async function runAudit(url, options = { port }) {
  // 使用Puppeteer启动Chrome
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // 访问登录页面
  await page.goto('https://example.com/login');

  // 输入用户名和密码
  await page.type('#username', 'example_username');
  await page.type('#password', 'example_password');

  // 提交登录表单
  await Promise.all([
    page.waitForNavigation(), // 等待页面跳转
    page.click('#login-button'), // 点击登录按钮
  ]);

  // 运行Lighthouse
  const { lhr } = await lighthouse(url, options);

  // 保存审计结果到JSON文件
  const resultJson = JSON.stringify(lhr);
  await writeFile('lighthouse.json', resultJson);

  // 上传JSON文件到服务器
  const formData = new FormData();
  formData.append('file', fs.createReadStream('lighthouse.json'));
  
  // 上传文件到你的服务器
  const res = await axios.post('https://your-server.com/upload', formData, {
    headers: formData.getHeaders()
  });

  console.log('File uploaded successfully');
  
  await browser.close();
}

// 运行函数
runAudit('https://example.com');

总结

性能插件插件还有很多需要考虑的情况，所以，不懂还是来私信问我吧，我同事要请我吃饭去了，不写了。

结语

Node 社群

 
 
我组建了一个氛围特别好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你对Node.js学习感兴趣的话（后续有计划也可以），我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。
 
 
2757cbe77e659cf7b1ba7a7fa21d8ebb.png
 
 
“分享、点赞、在看” 支持一下
 


                

        

        

    




    

      

        

            

              
                
                  傲娇的koala
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










              

  



          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值