性能审计
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');
接下来,我们分步骤大概介绍下几个核心实现
数据告警
// 伪代码 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');
处理设备、网络等不稳定情况
// 伪代码 // 网络抖动 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' });
用户登录态问题
也可以让后端同学专门提供一条内网访问的登录态接口环境,仅用于测试环境
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');
总结
性能插件插件还有很多需要考虑的情况,所以,不懂还是来私信问我吧,我同事要请我吃饭去了,不写了